Documenting your CSS using KSS

Transcript

1. DOCUMENTING YOUR STYLESHEETS USING A STYLEGUIDE IS AWESOME AND PERHAPS YOU SHOULD THINK ABOUT DOING IT. Speaking about...
2. As your codebase grows it becomes harder and harder to create a mental map of it as a whole. This is especially true for your CSS
3. HEY THERE I’m Justin Morris (@plasticine) I am the design & frontend guy at...
4. CONTEXT • We have a fairly large (# of Views) app • We have a LOT of UI (editing/reading interfaces) • We have LOTS of CSS (~11k SLOC SCSS) • Everyone at TC writes/maintains/implements front- end code (which is awesome)
5. CONTEXT • Every day; ... CSS is altered across dozens of different commits ... by many devs ... all working in different areas of the codebase
6. LOL , GOOD LUCK KEEPING ON TOP OF THAT
7. THE PROBLEM CSS can sometimes feel like this:
8. THE PROBLEM ...which leads to this: DEV 1: “I need to style this widget, is there a .class for this?” DEV 2: “Who knows! :D Just write even more CSS!” DEV 1: “LOL, Ok! More CSS is better, right? RIGHT!?” ...which results in this (and crap code):
9. ASSET PIPELINE ...are AWESOME! They really help! SASS + COMPASS +
10. • Write modular, abstracted SASS in dev • Serve compiled, compressed CSS in prod • Write less boilerplate, repeat yourself less • Be happier, etc... SASS + COMPASS) + ASSET PIPELINE
11. BUT still really hard to see the big picture...
12. DOCUMENTATION WILL SAVE US! github.com/kneath/kss (well, it seems to be helping so far anyway)
13. WRITE SOME DOCUMENTATION! KSS Step 1
15. WRITE SOME EXAMPLE MARKUP IN THE STYLEGUIDE KSS Step 2
17. PROFIT KSS Step 3 http://localhost:3000/styleguide
21. THANKS! @plasticine pixelbloom.com dribbble.com/justinmorris theconversation.edu.au Go make your own styleguide: github.com/kneath/kss