As an example below, what would be the best way to easily rename the below generic boxes that have no stand-out features?
Currently the class names seem to do the job, I can select individually as well as the whole children within the container. But when you have 2 or more similar containers full of similar similar content, what’s the best way to name them? Especially if they’re not in an easy to read order.
I had a look at BEM system but unsure if this would help (or I understand fully)
There are a million and one ways to do this, and it’s all context sensitive. Generally go from most generic–least generic, and call things what they are. So for example “boxes” is something that collects “box” elements. Maybe. As I say, it’s highly context sensitive and there are different styles of doing styles.
Where box has the most generic styles, boxes has some layout grouping styles, -sometype and -differenttype have more specific styles that build on the generic type. Then for specific boxes, have box-someevenmorespecifictype
It is used to reference element(s) that means any element with same class value will behave the same way depending on what setting has been given to the class
<Div class ="new " >
<P class ="new " >
How ever you can more class values inoyer words more class name
<Div class ="new old modern ancient " >
<P class ="new old ancient" >
The new class can have a color of red
The old class could be about font size and even color too
just don’t mix up thing when grouping element by class name
For example if old class affects color(red) and new class affects color(blue) too then that may cause issues
CSS Order and CSS specificity then comes to play where css rules are overwritten by others css rule
It all depends on what you want to applied on several elements or what not to
.box {
some basic general styling that applies to a load of things -- maybe the fonts, colours, borders
}
.box-1 {
some more specific properties that only apply to a certain set of boxes
}
.box-2 {
some even more specific properties
}
Then like .boxes would have some rules for layout (flexbox or grid).
So you could have "box box-1 boxes", which would be the general style for a box, plus some more specific style for the variant .box-1, then some layout properties defined in .boxes
Have a look at Bootstrap, or Bulma, or Semantic (any CSS framework will do). You’ll see this pattern. Use classes, start with the most general rules, get more specific.