Det här är intressant.
Har själv suttit en del och hela tiden försökt jobba fram en bra struktur som jag är nöjd med.
Det finns ju ett par olika "namnstrukturer" för css.
Den jag tycker är bekvämast (och enda jag kört med iofs) är ABEM (https://css-tricks.com/abem-useful-adaptation-bem/), som är en avknoppning av BEM (http://getbem.com/).
ABEM går alltså ut på att man delar upp din struktur i tre olika nivåer.
Organismer, molekyler och atomer.
Sen har vardera struktur tre typer av "namn" eller vad vi ska kalla det.
Block, element och modifierare.
Läs igenom båda länkarna ovan så får du bättre koll Lite svårt att förklara
Man har alltså inte ett dokument för vardera "siddokument" eller vad vi ska kalla det.
Utan man delar in CSS'en i ett flertal filer och sedan bygger man upp sin struktur via det.
Sen använder jag LESS för det hela.
Såhär ser strukturen ut för mitt nuvarande wp projekt
i style.less länkar jag bara ihop alla less-filerna. Som sedan kompileras till en .css.
Såhär ser alltså min style.less ut
@import "globals.less";
@import "materialColor.less";
@import "mixins.less";
@import "materialElements.less";
@import "./organism/o-block.less";
@import "./organism/o-element.less";
@import "./organism/o-modifier.less";
@import "./molecule/m-block.less";
@import "./molecule/m-element.less";
@import "./molecule/m-modifier.less";
@import "./atom/a-block.less";
@import "./atom/a-element.less";
@import "./atom/a-modifier.less";
@import "modifier.less";
@import "mediaQueries.less";
// Dev
@import "./dev/dev.less";