arozwalak
7/3/2015 - 11:51 AM

CSS: ITCSS https://www.youtube.com/watch?v=1OKZOV-iLj4

  1. Settings - Global variables, config switches
  2. Tools - Default mixins and functions
  3. Generic - Ground-zero styles (Normalize.css, resets, box-sizing)
  4. Base - Unclassed HTML elements (type selectors)
  5. Objects - Cosmetic-free design patterns
  6. Components - Designed components, chunks of UI
  7. (Themes/Test Layer)
  8. Trumps - Helpers and overrides

Opened-closed principle

Things should be opened to extension but closed for modification

Example files list:
_base.links.scss
_base.page.scss
_base.quotes.scss
_base.type.scss
_components.ads.scss
_components.boxes.scss
_objects.wrappers.scss
_settings.colors.scss
_settings.global.scss
_tools.aliases.scss
_tools.mixins.scss
_trumps.show-hide.scss
_trumps.widths-responsive.scss