▽ Managing CSS Projects with ITCSS - Harry Roberts Talk

ITCSS.md

▽ Managing CSS Projects with ITCSS

Source

• Video Harry Roberts - Managing CSS Projects with ITCSS
• Slides https://speakerdeck.com/dafed/managing-css-projects-with-itcss

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.