2

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?

  • 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

Your Answer

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

Browse other questions tagged or ask your own question.