8

Estaba re-estructurando mi proyecto web de manera que quede algo más limpio y ordenado que antes, y me surgió una duda.

Cuando hay una parte en la que ya se asigna una clase a varias cosas, pero no quieres que sean todas igual, ¿Sería necesario el uso tanto de una clase (la que define lo que es) y de un id para darle estilo?

Pongo un ejemplo:

/* ESTRUCTURA */

.flex-container {
  display: flex;
  align-items: stretch;
  background-color: none;
}

.flex-container > div {
  background-color: none;
  color: black;
  width: 100px;
  margin: 5px;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
}

#contenido {
	background-color: none;
	float: left;
	width: 100%;
	padding: 15px;
	margin-top: 7px;
	text-align: center;
}

#contenido2{
  background-color: FloralWhite;
	float: left;
	width: 100%;
	padding: 15px;
  margin: 5px;
	margin-top: 7px;
	text-align: center;
}

/* ESTRUCTURA IMÁGENES */

*,
*::before,
*::after {
  box-sizing: border-box;
}

.grid {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(var(--columnas), 1fr);
  width: calc(100% - 20px);
  max-width: 1200px;
  gap: 10px;
}

.grid__item {
  padding-top: 85%;
  position: relative;
  border: 1px solid;
}

.grid__img {
  --object-fit: cover;
  --object-position: center center;
  display: block;
  top: 0;
  bottom: 0;
  object-fit: var(--object-fit);
  object-position: var(--object-position);
  height: 100%;
  width: 100%;
  position: absolute;
}

@media screen and (min-width: 600px) {
  .grid {
    --columnas: 3;
  }
}

@media screen and (min-width: 400px) and (max-width:599px) {
  .grid {
    --columnas: 2;
  }
}

@media screen and (max-width: 399px) {
  .grid {
    --columnas: 1;
  }
}

.limpiar {
  clear: both;
}
<div class="flex-container" id="contenido">  <div style="flex-grow: 1">
  <p class="lateral">
    Gatos, gatos, muchos gatos<br>
    ¡Los gatos son adorables!<br>
  </p>
</div>
<div style="flex-grow: 9">
  <div class="grid">
    <div class="grid__item">
      <img    class="grid__img" src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg">
      <div class="caption">
        Texto a colocar
      </div>
      <div class="limpiar"></div>
    </div>
  </div>
</div>
<div class="flex-container" id="contenido2">
  <div style="flex-grow: 10">
    <p>Hola, Hola, Hola, Hola, Hola, Hola,<br>
      Hola, Hola, Hola, Hola, Hola, Hola, Hola, <br>
    </p>
  </div>
</div>

En este caso, sería con la clase flex-container y el id respectivo.

Hace poco, en un comentario me dijeron que no era recomendable el uso de class e id en el mismo objeto, ni mezclar ambos. Entonces me surgió la duda:

¿Cómo se supone que se tiene que dar estilo a dos objetos distintos con la misma clase?

Pongo el ejemplo del flex-container al ser una clase que da forma, por lo que, si lleva más elementos, tiene que llevar la misma clase.

No es que tenga mucha idea tampoco, pero si se quiere modificar algo con la misma clase ya definida pero no se quiere que sea igual, a mi parecer, el uso de una id se vuelve necesario. (Para evitar usar style="").

En caso de que no sea así, ¿Por qué? ¿Cuál sería una buena forma de darle estilo entonces?

7
  • 1
    Veo que en tus snippets sueles poner gran parte del código. Sería de ayuda que si tu pregunta se enfoca en algo muy especifico centres el snippet en eso. No logro entender la duda y no se a que clase/id debería de mirar.
    – x3k
    Commented el 6 feb. 2020 a las 14:28
  • 1
    ¡Pregunta editada!
    – Lucía
    Commented el 6 feb. 2020 a las 14:41
  • 1
    Perdona, sigo sin entender la duda. Igual estoy muy espeso :/ ¿Podrías darle una vuelta a la pregunta?
    – x3k
    Commented el 6 feb. 2020 a las 14:52
  • 1
    A ver si me expliqué mejor ahora
    – Lucía
    Commented el 6 feb. 2020 a las 14:59
  • 3
    ¿Responde esto a tu pregunta? ¿Qué es y para que se utiliza la especificidad de CSS?
    – x3k
    Commented el 6 feb. 2020 a las 15:20

3 respuestas 3

9

Los identificadores no están recomendados para maquetar.

Hay varias estrategias para personalizar un elemento concreto parte de un conjunto que toman sus estilos en una clase determinada.


Por ejemplo, imagina que de una serie de cajas con texto una debe de tener un color de fondo diferente:

introducir la descripción de la imagen aquí


Caso 1. Puedes añadir una clase específica, como si fuera un id.
Voy a usar unos estilos comunes:

html {
    font-size: 12px;
    padding: 5%;
}
.box {
    background: pink;
    margin: 1% auto;
    padding: 5%;
}

y añadiré al final una clase específica:

.green-box {
    background: green;
}


Este es el HTML:

<body>
    <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, molestiae nihil deleniti dolorem impedit quibusdam eaque deserunt maxime aspernatur!</div>

    <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, molestiae nihil deleniti dolorem impedit quibusdam eaque deserunt maxime aspernatur!</div>

    <div class="box green-box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, molestiae nihil deleniti dolorem impedit quibusdam eaque deserunt maxime aspernatur!</div>

    <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, molestiae nihil deleniti dolorem impedit quibusdam eaque deserunt maxime aspernatur!</div>
</body>

Esto funciona aun si inviertes el orden de las clases en el HTML:

class="green-box box"

pero no si lo haces en el CSS:

.green-box {
    background: green;
}
.box {
    background: pink;
    margin: 1% auto;
    padding: 5%;
}


Los estilos se leen en cascada, de arriba abajo, el de abajo sobrescribe al anterior...

En el caso anterior, todo bien. Nueva norma, mas bien una recomendación: organizar los estilos alfabéticamente... y ahí tenemos un problema con ciertos nombres, por ejemplo: blue-box iría antes que box, y esta última machaca el color de la anterior... vamos al uso de !important.

Si usar ids para maquetar, usar !important es aún más feo y aunque lo siguiente funciona:

.blue-box {
    background: blue !important;
}
.box {
    background: pink;
    margin: 1% auto;
    padding: 5%;
}


No debes usar !important, aunque puede ser necesario para sobrescribir estilos de bootstrap, maquetados heredados y cosas así... Usos muy concretos, para los que se pueden crear clases como:

.bg-blue {
    background: blue !important;
}
.bg-green {
    background: green !important;
}

Que de estar presentes sobrescriben el fondo del elemento.

Para evitar este problema al ordenar las clases, si sabes que estas estan ligadas a su uso en los elementos .box las nombras prefijandolas con esta clase:

.box {
    background: pink;
    margin: 1% auto;
    padding: 5%;
}
.box-blue-box {
    background: blue !important;
}


Caso 2. Sumar clases para aumentar la especificidad del elemento.
Es otra solución a el problema del caso anterior, en este caso indicas que un determinado estilo solo aplique al elemento que tiene las dos clases:

.blue-box.box {
    background: blue;
}
.box {
    background: pink;
    margin: 1% auto;
    padding: 5%;
}

Y en el HTML irían las clases box blue-box en el elemento.

Nos daría algo como:

introducir la descripción de la imagen aquí

El background de la clase definida más abajo (box) no le afecta, porque le has dado una mayor especificidad.


Nota: fíjate que las clases van juntas en el CSS, si dejas un espacio en medio no funcionaría.


Y hay más formas, CSS es muy extenso, pero están son seguramente las más comunes...


Sobre especificidad CSS: https://developer.mozilla.org/es/docs/Web/CSS/Especificidad

5
  • 1
    Y al aplicarle un añadido a la clase box, ¿lo convierte con la misma estructura, pero a la vez con una clase diferente?
    – Lucía
    Commented el 6 feb. 2020 a las 15:01
  • 1
    En este caso aplica las dos clases al cuadro, pero el background de más abajo es el que se aplica.
    – Orici
    Commented el 6 feb. 2020 a las 15:03
  • 1
    Nunca había leído sobre eso, qué interesante. ¿Sabes de alguna documentación que lo explique más a fondo? A ver si consigo aplicarlo a mi proyecto
    – Lucía
    Commented el 6 feb. 2020 a las 15:07
  • 1
    @Lucía lo que buscas se llama cascada en las reglas CSS, que como puedes ver se aplica la segunda por que al ser la última con un background sobre escribe a la anterior, pero esto va a estar condicionado o limitado por la especificifdad de tus reglas CSS sobre si se aplican a un tag, una pseudoclase, un id o una class o incluso que apliques la regla de !important
    – user128299
    Commented el 6 feb. 2020 a las 15:10
  • 1
    Complemento la respuesta con la utilidad que tienen las pseudo-clases de CSS a la hora de seleccionar los elementos a los que deseamos afectar y que nos ayudan, entre otras cosas, a tener un código HTML más limpio: developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes
    – phpMyGuel
    Commented el 6 feb. 2020 a las 15:31
1

Los selectores de CSS te permiten jugar con los elementos, las clases, la jerarquía, los eventos del ratón... Hay muchas maneras de elegir un elemento sin recurrir a añadir un atributo ID. No es que sea esto malo per se, pero en general no es recomendable porque el código se vuelve más fácil de romper (cualquier cambio en una id puede romper los estilos).

Te pongo algunos ejemplos para que veas lo que se puede hacer, pero no es más que una breve muestra:

div {
  padding: 5px;
  border : 1px solid gray;
}

div div { /* div que tienen  un div como ancestro*/
  font-weight: bold;
}

div > div { /* div que tiene un div como padre (¡no cualquier ancestro!)*/
  background-color: lightgray;
}

div.azul { /*div CON la clase azul*/
  color: navy;
}

div > div.texto-gris { /*div hijo de un div con la clase texto-gris*/
  color: grey;
}

div.texto-gris { /*div con la clase texto-gris (menos específico que el anterior*/
  color: lightgray;
}

div:nth-child(2n) { /*Los div en posición par*/
  font-style: italic;
  background-color: cyan;
}

div:hover { /*div con el cursor encima*/
  background-color: green;
}

div > *:not(div):hover { /*hijos directos de div que no sean div con el ratón encima*/
  background-color: blue;
}
<div class="azul">
 DIV 1
   <div class="redondo">
   DIV anidado
    <div class="texto-gris">
     DIV doblemente anidado
    </div>
  </div>
</div>

<div >
 DIV 2
   <section>
   section anidado
    <div class="texto-gris">
     DIV doblemente anidado
    </div>
  </section>
</div>

<div>
     DIV 3
</div>

<div>
   DIV 4
</div>

0

Algo más fácil y rápido que yo hago, es crear clases distintas y las defino en donde las necesito. Tanto para la web como para responsive. Puedes realizar, ejemplo: .box-contac y allí defines como deseas que se vea.

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.