-3

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.

7
  • 1
    I don't get the question. Either way works, why not pick the one you prefer? Your question seems to be built on the premise of there needing to be a universally correct answer to how css styles should be categorized.
    – Flater
    Sep 16, 2019 at 16:19
  • As someone who started out in front end development, the approach you take can have big consequences on the maintainability of your code. I'm going to post an answer when I get a chance. Sep 16, 2019 at 16:50
  • 1
    I don't understand what the downvote is for. The question is about clean code architecture. I'm not asserting if one way is best over another, i just want to know which is best for clean code development, what anyone has tried. The summary of the question is whether you should reuse multiple CSS code or declare a class and keep reusing the class/selector over an over again. Basically, i want to write less code and not having to keep rewriting the same css code over and over again, so can someone please tell me what the downvote is for?
    – samceena
    Sep 16, 2019 at 17:07
  • @GregBurghardt yes i completely agree with you, also, i want a situation where i declare the color once,: "color: #ededed", and not have to declare it over and over again, because if i or anyone wants to change the color, they can change it in one location, and not have to change it in 6 different locations in the code.
    – samceena
    Sep 16, 2019 at 17:10
  • 4 down votes and no close votes. It gets very frustrating. People have legitimate questions about CSS and HTML, which is a very different world than OO or functional programming, and these questions get down-voted to oblivion. Sep 16, 2019 at 17:19

3 Answers 3

2

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.

1
  • Makes sense. I agree with semantic naming that helps give me some answer to the question. As for variable, i think the best would be LESS or SASS.
    – samceena
    Sep 16, 2019 at 20:56
0

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.

-1

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;}

Not the answer you're looking for? Browse other questions tagged or ask your own question.