Repeating CSS class contents. Structuring css code

Question

I'm a backend developer working on a webpage, building the CSS part. I like to write as less code as possible and reuse them throughout the site, a lot of pages.

I want to be able to reuse some CSS code. For example, if i have this code:

.box1{
    background: blue;
    height: 200px;
    align-items: center;
}

and i have 5 other boxes or more that i need to use the code: "align-items: center;" for, does it make sense to have them such that

.box1, .box2, .box3, .box4, .box5{
    align-items: center;    
}

and

.box1{
    background: blue;
    height: 200px;
}

---

or declare a reusable class:

.box-align{
    align-items: center;    
}

The issue i have is, i have to reuse so many codes in different parts of the webpage, and i want to write as less code as possible, which i guess can have an advantage of reducing the size of the file, and make updating CSS easy and fast.

This also applies to colors too:

.box1{
    color: red;
}

if i decide to declare a single class and reuse the class all over, i may have a code like this in my HTML:

<div class="box1 box-align-center box-green-color box-text-decoration ....."> </div>
<div class="box2 box-align-center box-green-color box-text-decoration ....."> </div>
<div class="box3 box-align-center box-green-color box-text-decoration ....."> </div>

but if i decide to make it clean like this:

<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div>

then i'll have to do:

.box1, .box2, .box3, .box4, .....{
    align-items: center;
    color: red;
    text-decoration: underline;
    .......
}

the main issue is, these boxes will have different parents all over different pages. Does anyone have a clean code architecture for this? Just like you can declare a function, variable, or constant in OOP and reuse them all over your project.

PS: I see so many websites write CSS code and reuse them about 50 times, like having "text-align: center", and using or declaring it in about 50 classes when they could have been better optimized.

Answer 1

The reason this:

Example 1

.box1, .box2, .box3, .box4 {
    /* common styles */
}

.box1 {
    border-color: red;
}

.box3 {
    text-align: center;
}

is preferable to this:

Example 2

.box1, .box2, .box3, .box4 {
    /* common styles */
}

.box-align-center {
    text-align: center;
}

.box-text-decoration {
    text-decoration: line-through;
}

Ultimately has to do with the separate of structure and style. CSS classes in example #2 might as well have you add the align="center" attribute to the HTML tag. These CSS classes are specific to a certain kind of style.

What does it mean for a "box" to be underlined?

What does it mean for a box to be aligned center?

These are the questions you want to answer. Meaning first. Then style.

Maybe a .box1 box-align-center is used as a "callout" in body text. In this case, you want to name your CSS class callout:

.callout {
    float: right;
    margin-left: 1em;
    text-align: center;
}

Now your CSS class has semantic meaning beyond the confines of the limited vocabulary of HTML.

Perhaps the .box2 .box-text-decoration box is what something looks like when it is deleted. What you want is:

.deleted {
    text-decoration: line-through;
    float: right;
    margin-left: 1em;
}

You can eliminate the code repetition and get custom styling with:

.callout, .deleted {
    float: right;
    margin-left: 1em;
}

.callout {
    text-align: center;
}

.deleted {
    text-decoration: line-through;
}

This is preferable because changes to CSS classes happen for semantic reasons, not stylistic.

When something becomes "deleted" you add the "deleted" class.

When something is a "callout" you add the "callout" class.

What if a "callout" gets marked "deleted"? Well, you increase the composability of these CSS classes:

<aside class="callout deleted">
    ...
</aside>

Next, someone says "if it gets marked to be deleted, make it red." You say, "no problem:"

.deleted {
    text-decoration: line-through;
    color: red;
}

And you're done.

If you had gone the other route, you would have started out with this markup:

<aside class="box1 box-align-center box-align-text-decoration">

And then every place in your web site where you have this combo of styles, you would need to add a new class: box-color-red:

<aside class="box1 box-align-center box-align-text-decoration box-color-red">

Now your markup is changing for stylistic reasons. This is a big code smell. Use CSS classes to convey application state and meaning. Write CSS declarations to give that state and meaning a visual representation.

The markup should only change when state or meaning changes, not when the visual representation of that state or meaning has changed.

Answer 2

In my experience, attempts to write reusable CSS often lead to very hard to maintain code.

The problem with this idea is all your components across the application are tightly coupled together. What happens if you suddenly want one of the components to vary in its behaviour differently from the others? In practice, different components are always likely to vary from each other - otherwise they'd be the same component!

Things like mixins and inheritance using CSS processors are invariably a bad idea. I'm not saying they don't have a use, but far too often they are used very badly. CSS is complicated enough due its global scope. Imagine if you have to not just read through lots of nested selectors to work out what rules are being applied to an element, but you also have to understand some cryptically written function that generates these?! It's for these reasons that devs often resort to just adding lots of styles, additional selectors, and overusing !important until the page just "looks right".

From a performance perspective, repeating styles over again is not a bad thing. If you minify and compress your CSS files, the repeated code is often optimised away in any case. Also if you're smart about only serving up the stylesheets that a page needs, then you barely have to worry about the performance impact at all of repeated styles.

The best way to reuse code in CSS is via variables. Either CSS custom properties or variables provided by your processor (e.g. SASS). The things that you actually want to vary at the same time across the site are things like colors, fonts, and dimensions, and these can easily be expressed in variables.

Answer 3

You can give them IDs for different styles and for common styles give them common classes.

    #box1 { color : blue; height :100px;}
    #box2 { color : red; height :120px;}
    .box12 { align-items: center; width : 345px;}