Today I learned about scalable and modular architecture for CSS. The list of priority styling goes as so... 1. Base 2. Layout 3. Module 4. State 5. Theme
base.ss is the first style sheet linked into index.html. this holds all the single element selectors and gobal selectors like a html selector or global font family.
layout.css is the 2nd link style sheet holding all classes and Id's.
module.css holds everything that isn't an ID or class selector, single element selector, animation/transition selector or hidden/show selector. It is generally multiple element selectors that don't fall into the previous categoires or state.css
state.css holds all action, animation, transition, hidden or shown styling within a selector.
Last is theme.css wich isn't realy utilized but known to describe how modules or layouts might look. Kind of like a wire-frame to my understanding.