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?
