Renaming classes to more simple names

HTML-CSS
#1

Hey guys,

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)

Thank you.


<div class="box box-container-1">
   <div class="inner-box unique-box-1"></div>
   <div class="inner-box unique-box-2"></div>
   <div class="inner-box unique-box-3"></div>
</div>

<div class="other-box other-box-container-1">
   <div class="other-inner-box other-unique-box-1"></div>
   <div class="other-inner-box other-unique-box-2"></div>
   <div class="other-inner-box other-unique-box-3"></div>
</div>
#2

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.

<div class="box boxes boxes-sometype">
   <div class="box box-sometype"></div>
   <div class="box box-sometype"></div>
   <div class="box box-sometype"></div>
</div>

<div class="box boxes boxes-differenttype">
   <div class="box box-differenttype"></div>
   <div class="box box-differenttype"></div>
   <div class="box box-differenttype"></div>
</div>

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

1 Like
#3

This is very helpful and you’ve cleared up some confusion for me.

I never new we could have more than 2 classes in 1 class="", this will be very helpful.

Thank you.

#4

What do you mean “2 classes in 1 class” (just want to make sure you haven’t misunderstood the example slightly)?

#5

class=“box box-1”
class=“box box-1 box-2”

I assumed you could only have the former when using a class but you used 3 different names in one class.

#7

Class is an attribute

<Div class ="" >
<P class ="" >

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

You can have lots of classes in an element

1 Like
#8

Ah, yeah, I see. So what I’d be doing is

.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.