Skip to content

Instantly share code, notes, and snippets.

@aarongarciah
Last active March 14, 2024 13:52
Show Gist options
  • Save aarongarciah/bc2f0c3e00b30d69e83bcd8963ba3c20 to your computer and use it in GitHub Desktop.
Save aarongarciah/bc2f0c3e00b30d69e83bcd8963ba3c20 to your computer and use it in GitHub Desktop.
▽ Managing CSS Projects with ITCSS - Harry Roberts Talk

▽ Managing CSS Projects with ITCSS

Source

Core concept

  • Start with generic and end with explicit.
  • Write CSS in specificity order.
  • 📈 The Specificity Graph must be always trending upward.
  • All rulesets should only ever add to and onherit from previous ones.

Layers

1. Settings

  • Globally-available variables.
  • Config switches.
  • Brand colours, etc.

2. Tools

  • Globally-available tools.
  • Public mixins.
  • Helper functions.

3. Generic

  • Ground-zero styles.
  • Normalize.css, reset, box-sizing, etc.

4. Base

  • Unclassed HTML elements.
  • Last layer we see type selector.

5. Objects

  • OOCSS.
  • Design patterns.
  • No cosmetics.
  • Begin using classes exclusively.
  • Agnostically named (e.g. .ui-list {}).

6. Components

  • Designed pieces of UI.
  • Still only using classes.
  • More explicitly named (e.g. .product-list {}).

7. Trumps

  • Overrides, helpers, utilities.
  • Only affect one piece of the DOM at a time.
  • Usually carry !important.

File system

_[section-name].[partial-name].scss. e.g.:

_base.links.scss
_componets.buttons.scss

Other

  • Media queries: put them in the partial where the selected affected are.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment