# CSS Architecture
## on a Shoestring
[@bensmithett](https://twitter.com/bensmithett)
## Once upon a time...
- One huge CSS file
- No real structure
- New features? Kinda just added stuff to the bottom
## OOCSS
## SMACSS
## SUIT
## BEM
## North
## Sass
## Less
## Stylus
## Bootstrap
## Inuit
## Susy
## Singularity
## Grunt
## Gulp
## Yeoman
## The basics
Solid, scalable, maintainable CSS architecture.
### app.scss
```scss
@import "vendor/normalize.css"
@import "base"
@import "components/*"
```
## [Normalize.css](http://necolas.github.io/normalize.css/)
Starts us on a level playing field.
## _base.scss
```scss
*, *:before, *:after {
box-sizing: border-box;
}
a {
color: green;
}
```
```
.page {}
.header {}
.comment-box {}
.avatar {}
```
#### Rule #1
### Each component has its own file
```bash
components/
_avatar.scss
_comment_box.scss
_header.scss
_page.scss
```
When I see this HTML
<div class="comment-box">
I know to look in
components/_comment_box.scss
#### Rule #2
### A component has no knowledge of its context
```scss
.avatar {
display: block;
> img {
display: block;
max-width: 100%;
}
}
```
#### Rule #3
### Components can have subcomponents
```scss
// components/_comment_box.scss
.comment-box__avatar { ... }
```
```scss
// components/_profile_box.scss
.profile-box__avatar { ... }
```
```css
.comment-box__avatar {
position: absolute;
top: 10px;
left: 10px;
height: 50px;
width: 50px;
}
```
```html
<div class="comment-box">
<div class="comment-box__avatar">
<a class="avatar" href="#">
<img src="...">
</a>
</div>
</div>
```
```html
<div class="comment-box">
<div class="comment-box__avatar">
<Avatar src="foo.jpg" />
</div>
</div>
```
#### Rule #4
### Minimise depth of applicibility
```scss
.comment-box {
a {
color: blue;
}
}
```
```scss
.comment-box {
> a {
color: blue;
}
}
```
```scss
.comment-box__link {
color: blue;
}
```
#### Rule #5
### Components should be small & disposable
If a class doesn't fit on a 27" monitor without scrolling, it's too big!
```
.comment-box {
...
}
.comment-box__avatar {
...
a {
...
}
img {
...
}
}
```
### Everything is a component
### Each component has its own file
### A component knows nothing about its context
### Create sized, positioned containers for nested components
### Make small, disposable components
```bash
stylesheets/
app.scss
_base.scss
vendor/
normalize.css
components/
_comment_box.scss
_header.scss
_page.scss
...
```
```bash
components/
comment_box/
_comment_box.scss
_comment_box.html
_comment_box.js
page/
_page.scss
_page.html
_page.js
...
```
### What if I have existing CSS?
```bash
stylesheets/
_utilities.scss
_forms.scss
_typography.scss
_some_page_specific_junk.scss
```
```bash
stylesheets/
base/
_utilities.scss
_forms.scss
_typography.scss
_some_page_specific_junk.scss
components/
_new_thing.scss
```
# Thanks!
[@bensmithett](https://twitter.com/bensmithett)
