CSS without the hurt

A collection of eight guidelines that I use to help me write maintainable CSS

Transcript

1. CSS without the hurt
3. The “Rules”
4. #1 CSS structure should be decided by the visual structure of the page (use the comps!)
5. Categories of styles Styles that appear on every page Styles that appear on more than one page Styles that appear on a single page
6. Categories of styles Styles that appear on every page Styles that appear on more than one page Styles that appear on a single page NB
7. Rails tries to help… A global application.css and then one CSS file per controller problems no obvious place to put styles that appear on more than one page but not all
8. Eoin tries to help… @import “variables”; @import “elements”; / / bare HTML elements @import “modules/header”; @import “modules/footer”; / / your modules come from your visual inspection of the page @import “grid” @import “theme”
9. #2 Selectors should be combinations of classes only!
10. Specificity is not your friend https:/ /specificity.keegan.st/
11. #3 Think in layers
12. layer 0: built-in browser styles layer 1: Bare HTML elements super strong global defaults layer 2: modules most of your styles go in here layer 3: grid grids are all a bit hacky keep grid and modules different in HTML i.e. your “grid HTML” creates an invisible skeleton that your modules live in layer 4: themes almost never required NEVER CROSS LAYERS
13. #4 Don't leap to abstraction too early
14. #5 Pick one way of combining functionality and stick to it
15. Ways of combining styles ways of combining styles multiple classes on same element e.g. <div class=“foo bar”> Scss @extend Scss @include Pick one and stick with it on a project
16. #6 You are probably not allowed to care about the file size of your CSS
17. #7 Ignore performance until you can't.
18. #8 Never break these rules. Unless you need to. Then break them as much as you need to.