How can I properly classify elements?

Question

I'm writing a webpage with a simple header, nav, body and footer layout.

To style it, I wrote the following CSS:

.mainSideBar {
    position: relative;
    display: inline-block;
    vertical-align: top;

    width: 20%;
    height: auto;

    margin: 1%;

    border: 1px groove darkgreen;

    background-color: green;
    /*opacity: 75;*/

    min-width: 10em;
}

body {
    background-color: green;
}

.navBar {
    position: relative;
    display: inline-block;

    width: 100%;
}

.uniqueBody {
    position: relative;
    display: inline-block;

    width: 70%;
}

.sideBarImage {
    position: relative;
    display: inline-block;

    height: auto;
    width: 100%;
}

#embeddedNavBar {
    display: inherit;
}

.mainBody {
    position: relative;
    display: inline-block;

    height: auto;

    background-color: green;
}

.mainHeader {
    position: relative;
    display: inline-block;

    text-align: center;

    width: 100%;

    background-color: olive;

}

.mainFooter {
    position: relative;
    display: inline-block;

    background-color: olive;
}

I noticed though, that it's not very modular. There's a lot of repeated styles that I'll likely need to change down the road (like the main background color), and to update it, I'll need to go over the entire stylesheet looking for instances.

I thought of introducing simpler classes like:

.greenBackground {
    background-color: green;
}

.heavyMargins {
    margin: 1%;
}

So then I can just add multiple classes to an element to have it look similar to other elements.

This forces me to describe in the HTML what the element should look like though:

<div class="greenBackground heavyMargin">...</div>
<div class="heavyMargin">...</div>

Which, as far as I know is frowned upon.

Ideally, I could fuse classes together then just apply it in the HTML:

<style>
    .greenBackground {
        background-color: green;
    }

    .heavyMargins {
        margin: 1%;
    }

    .mainFooter {
        /* Obviously not valid CSS */
        .heavyMargins;
        .greenBackground;
    }

    .mainHeader {
        /* Ditto here */
        .heavyMargins;
    }
</style>
<body>
    <div class="mainHeader">...</div>
    <div class="mainFooter">...</div>
</body>

But I haven't been able to find a way to achieve this is CSS.

How can I write modular CSS that doesn't break the separation of concerns between CSS and HTML?

Consider using some CSS enhancer like LESS.CSS to improve your CSS organization. — Robert Harvey
– Robert Harvey, Commented Dec 11, 2015 at 1:06
@TulainsCórdova I'm not entirely sure what my intent was. This was necrobumped from a year ago. I don't even write CSS/HTML anymore. I think "DRY" CSS would he a better description of what I was looking for. — Carcigenicate
– Carcigenicate, Commented Dec 2, 2016 at 22:44

Ray Butterworth · Accepted Answer · 2020-02-12 14:45:20Z

You can use CSS variables:

:root {
    --primary-background-color: green;
    --secondary-background-color: olive;
}
...
body {
    background-color: var(--primary-background-color);
}
...

The var(--name) can be used multiple times.

This means that:

if you later want to change "green" to some other colour, you need to change only the one instance of it.
if at the moment two things happen to have the same background colour, but there is no inherent reason for them to be the same, you can use two different variables with the same value. Then, if you later want to change the --important-color items to a different colour without affecting the --essential-color items, you don't have to individually examine every instance of that colour to determine which ones to change.

See Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN for more details.

Stack Exchange Network

How can I properly classify elements?

1 Answer 1

Hot Network Questions

How can I properly classify elements?

1 Answer 1

Related

Hot Network Questions