0

Tengo este código HTML:

  <div class="seccion-inferior contenedor seccion">
      <section class="blog"></section>

      <section class="testimoniales"></section>
  </div>

En el tutorial que estaba mirando le daba CSS al blog y testimoniales de esta manera:

.seccion-inferior .blog{
    flex-basis: 60%;
  }

  .seccion-inferior .testimoniales{
    flex-basis:  calc(40% - 2rem);
  }

¿Por qué simplemente no lo puso de esta manera?:

      .blog{
        flex-basis: 60%;
      }

      .testimoniales{
        flex-basis:  calc(40% - 2rem);
      }

Yo con la segunda manera consigo el mismo resultado, no sé si lo puso así por cuestión de claridad, especificidad, buena práctica de programación o para que tenga más peso ese selector.

2
  • 1
    En parte es por una buena práctica, si llegase el caso de que tengas otra clase con el mismo nombre que blog pero tenga otro tipo de estilo, este se va a pisar con ese segundo que mostrás por la jerarquía global que tiene. En mi experiencia, siempre uso el método 1 para crear los estilos al menos que haga algo global como un clearfix que se utiliza en todo el proyecto.
    – Kleith
    Commented el 8 ago. 2019 a las 13:06
  • 4
    Podría ser por la especifidad, como bien has dicho, para que la regla tenga más peso. O podría ser porque en tu página podrías tener otros elementos .blog y .testimoniales y esas reglas solamente las quieres aplicar a los que sean hijos de un elemento .seccion-inferior.
    – phpMyGuel
    Commented el 8 ago. 2019 a las 13:07

2 respuestas 2

5

El primer codigo esta indicando que se apliquen la regla a la clase .blog y .testimoniales contenidas dentro de la clase .seccion-inferior, con lo que solamente aplicara esa regla a ese grupo de etiquetas.

.seccion-inferior .blog{
    flex-basis: 60%;
  }

  .seccion-inferior .testimoniales{
    flex-basis:  calc(40% - 2rem);
  }

En Cambio usando el segundo bloque CSS le dices que cualquier etiqueta que contengan la clase .blog y .testimoniales se aplique le regla, causando que tanto el contenido en la clase .seccion-inferior como cualquier otro que tenga esas dos clases tomen la regla.

Resumiendo: Es una cuestion de ambito o alcance de la regla del CSS, en la cual quieres que afecte a un grupo especifico o todas las clases etiquetas que contengan esa clase.

1
  • Pero muchísimas gracias amigo,me hizo un gran aporte :) Commented el 8 ago. 2019 a las 14:48
2

La respuesta a tu pregunta pues... puede ser una o varias razones...

Si nos ponemos a analizar ambos selectores:

//Selector 1
.seccion-inferior .blog

//Selector 2    
.blog

Si consideramos el selector 1 estamos seleccionando el objeto html con clase blog que este dentro de otro con clase seccion-inferior. Ojo que el objeto "blog" puede estar en cualquier subnivel del objeto "seccion-inferior", no necesariamente tiene que ser el hijo inmediato de "seccion-inferior"

Para el selector 2 se esta seleccionando cualquier objeto con clase blog que este dentro del body y en cualquier subnivel.

Considerando el análisis de ambos selectores pues de aquí en adelante puede ser cualquier razón que se te ocurra acorde a los análisis.

Quizás necesita que el objeto "blog" este dentro de un contenedor con clase "seccion-inferior" porque este objeto le maneja el tamaño o lo visualiza de distintas formas si esta en navegador de escritorio o en móvil

Quizás siemplemente lo hace por costumbre o tendencias que los programadores vamos agarrando a la hora de hacer cualquier trabajo, ser específico con los selectores o lo hace por buenas prácticas, quizás pensó que era necesario hacerlo así pero no lo era, etc.

Todo a partir del análisis de los selectores es mera especulación ya que borraste todo el resto del html dejándonos a la imaginación las posibles razones que pudo haber tenido para hacerlo de esa forma y aunque tuviésemos el html aún así probablemente nos haría falta el css para tener la razón un poco más clara

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.