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?