Esther H. // version history

CSS Architecture

CSS/sass

Dayton Web Developer | By Nathan Rambeck

Reference

CSS Pattern Libraries

  • Fabricator
  • PatternLab
  • Google Material Design

CSS Architecture

  • OOCSS (re-usability)
  • SMACSS (seperation of concerns)
  • ITCSS (style ordering)

Type of CSS Rules

  • Base: styles applied globally to bare elements
  • Objects: Re-usable CSS classes for layout and structure Ex. grid systems / layout containers / structural patterns
  • Components: Components are discrete, self-contained pieces of UI Ex. buttons / carousels / pullquotes / header / navigation … etc.
  • State: State classes begin with “is” or “has”
  • Themes: Theme classes alter components with unique colors, fonts or other decorations
  • Utilities: Utility classes are single purpose helpers that apply one specific styling rule

Naming Your Classes

  • All lowercase
  • Use dashes or underscores
  • Long enough to discern (.pullquote not .pq)
  • No longer than needs to be (.btn not .button)

Get BEM

Naming Methodologies

  • By presentation (how they look) Ex. button--green, rounded-image
  • By content (what is in) Ex. profile-image, article-heading
  • By function (what it for) Ex. button--primary, content-heading

Reference: Naming CSS Stuff is Really Hard

Namespacing

Add prefixes to all of your classes to recognize the purpose of each one.

  • Objects: .o-
  • Components: .c-
  • State: .is- or .has-
  • Theme: .t-
  • Utility: .u-

Advantages of Using PREPROCESSOR

  • Imports
  • Variables
  • Functions
  • Mixins
  • Nesting