-2

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.

  • 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 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. – Greg Burghardt Sep 16 at 16:50
  • 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? – samson ade Sep 16 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. – samson ade Sep 16 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. – Greg Burghardt Sep 16 at 17:19
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.

  • 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. – samson ade Sep 16 at 20:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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