3

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?

Improve this question
4
  • 2
    Consider using some CSS enhancer like LESS.CSS to improve your CSS organization. – Robert Harvey Dec 11 '15 at 1:06
  • This is a problem that is being addressed with css4. – Neil Dec 11 '15 at 8:14
  • Define "modular CSS". – Tulains Córdova Dec 2 '16 at 21:57
  • @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 Dec 2 '16 at 22:44
1

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.

Improve this answer

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.