I was re-structuring my web project so that it would be a little cleaner and tidier than before, and a question arose.
When there is a part in which a class is already assigned to several things, but you don't want them all to be the same, would it be necessary to use both a class (the one that defines what it is) and an id to style it?
I give an example:
/* 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>
In this case, it would be with the class flex-container
and the id
respective.
Recently, in a comment they told me that it was not recommended to use class
e id
in the same object, nor to mix both. Then the doubt arose:
How are you supposed to style two different objects with the same class?
I give the example of flex-container
being a class that gives shape, so if it has more elements, it has to have the same class.
Not that I have much of an idea either, but if you want to modify something with the same class already defined but you don't want it to be the same, in my opinion, the use of an id becomes necessary. (To avoid using style=""
).
If not, why? What would be a good way to style it then?
Identifiers are not recommended for layout.
There are several strategies to customize a particular element part of a set that takes its styles in a given class.
For example, imagine that out of a series of text boxes one should have a different background color:
Case 1. You can add a specific class, just like an id .
I'm going to use a few common styles:
and I will add at the end a specific class:
This is the HTML:
This works even if you reverse the order of the classes in the HTML:
but not if you do it in the CSS:
The styles are read in cascade, from top to bottom, the one below overwrites the previous one...
In the above case, all good. New norm, rather a recommendation: organize the styles alphabetically... and there we have a problem with certain names, for example:
blue-box
it would go beforebox
, and the latter crushes the color of the previous one... let's use!important
.If using ids for layout, using
!important
is even uglier and though the following works:You shouldn't use !important, although it may be necessary to override bootstrap styles , legacy layouts and the like... Very specific uses, for which you can create classes like:
Which, if present, overwrite the background of the element.
To avoid this problem when ordering the classes, if you know that they are linked to their use in the elements,
.box
name them by prefixing them with this class:Case 2. Add classes to increase the specificity of the element.
It is another solution to the problem of the previous case, in this case you indicate that a certain style only applies to the element that has the two classes:
And in the HTML the classes would go
box blue-box
in the element.It would give us something like:
The
background
one of the class defined below (box) does not affect it, because you have given it more specificity.Note: note that the classes go together in the CSS, if you leave a space in between it won't work.
And there are more ways, CSS is very extensive, but these are probably the most common...
About CSS specificity: https://developer.mozilla.org/es/docs/Web/CSS/Specificity
CSS selectors allow you to play with elements, classes, hierarchy, mouse events... There are many ways to choose an element without resorting to adding an ID attribute. Not that this is bad per se , but in general it is not recommended because the code becomes easier to break (any change to an id can break styles).
I give you some examples so you can see what can be done, but it is only a brief sample:
Something easier and faster that I do is create different classes and define them where I need them. Both for the web and for responsive. You can do, for example: .box-contac and there you define how you want it to look.