Sto scrivendo una pagina web con un semplice header, nav, body e footer layout.
Per adattarlo, ho scritto il seguente 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;
}
Ho notato però che non è molto modulare. Ci sono molti stili ripetuti che probabilmente ho bisogno di cambiare strada (come il colore di sfondo principale), e per aggiornarlo, dovrò esaminare l'intero foglio di stile cercando le istanze.
Ho pensato di introdurre classi più semplici come:
.greenBackground {
background-color: green;
}
.heavyMargins {
margin: 1%;
}
Quindi posso aggiungere più classi a un elemento per farlo apparire simile ad altri elementi.
Questo mi costringe a descrivere nel codice HTML come dovrebbe apparire l'elemento:
<div class="greenBackground heavyMargin">...</div>
<div class="heavyMargin">...</div>
Che, per quanto ne so, è disapprovato.
Idealmente, potrei fondere insieme le classi e applicarle semplicemente nell'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>
Ma non sono stato in grado di trovare un modo per ottenere ciò è CSS.
Come posso scrivere CSS modulare che non interrompa la separazione delle preoccupazioni tra CSS e HTML?