What is the benefit of using multiple class names?

Question

HTML
<div class = “leg leg_1”> </div>

I’ve used two class names, like shown above, no more than that though.

On actual websites I’ve seen, I see they have like 5 or more class names. I don’t understand why and how you manage that?

Answer 1

As in your example both of "leg"`s will have some properties in common.

.leg{
height:100pxm
width:20px;
background-color:#ffe0bd;
position:absolute;
}

but there will be some things that are different in them so you specify them in separate classes.

.leg_1{
left:0;
}

.leg_2{
right:0;
}

if you choose to use different class for every leg only because you don't want many values for class attribute in your markup you will need to repeat the code for each leg only because they DON'T have 2 attribute in common(left,right)

so this introduces redundancy. always follow DRY principle when possible . this applies to css as well. The more you modularize code , simpler it's to manage later.

Now about websites. Most of the time they are built using frameworks like bootstrap, foundation etc and it's necessary for them to keep classes reusable , divide styles among multiple classes so you can have better control on styles without caring why it this class has something I don't want.