# ▽ Managing CSS Projects with ITCSS

Source
- Video [Harry Roberts - Managing CSS Projects with ITCSS](https://www.youtube.com/watch?v=1OKZOV-iLj4&t=1266s)
- 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.