Organization and Isolation
UI-Components: Buttons, Accordion, Menu, Nav, etc.
The Views
The Core: Grid, Layout, Typography
No in-line styles
For Core and UI-Components, organize sections of code by component.
Use consistent indentation!
The UX Lead/Designer owns the Core and UI-Components. Developers should not modify them without consultation.
Namespace each view/page. Wrap all the styles for a view with a Class name to properly isolate code.
Set base padding and margin sizes. Then use variables to scale up/down.
eg: base-padding/3, base-padding*2, etc.
Only use variables for z-index. And
z-index: 9999999
is always the wrong answer.
Learn to target elements correctly. Using an
ID
or
!important
is generally the wrong answer.
Use snake case for class names.
Understanding SASS and LESS
home