Maintainable stylesheets with Sass

You’re writing beautiful, well tested and refactored code. You do your best to keep your views clean. But your stylesheets are a wasteland you would rather not enter and no dedicated designer around. — Sound familiar? Writing, maintaining and refactoring (yes!) clean and readable stylesheets even in large projects is possible and this talk will give a few ideas on how to keep the work on the GUI fun.

Transcript

1. Writing maintainable CSS with Sass
2. @polarblau
3. ( https://github.com/polarblau/maintainable-stylesheets/ )
4. Alltag (Everyday life)
5. Technical debt Confidence LOC
6. Alltag & Stylesheets
7. Technical debt Confidence LOC
8. Why? What makes the work with stylesheets painful?
9. It’s too easy!
10. It’s easy to learn, everybody can do it!
11. It’s easy to read, but hard to comprehend.
12. It’s easy to start, but hard to scale.
13. Let’s get serious!
14. programming == serious_business css == programming
16. New Legacy
17. New project
18. Define all rules!
19. Distribute all the rules!
20. Enforce all the rules!
22. Rules:
23. Version control
24. What would do?
25. HTML
26. Stay clear of frameworks
27. Keep styles where they belong
28. Files
29. Composition / Color / Type Elements of a visual language
30. /layout /colors /typography
31. /layout /colors /typography /helpers /base (reset, etc.) /ie /print
32. <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
33. Media queries?
34. =respond-to($media) @if $media == desktop @media screen and (min-width: 1280px) @content @else if $media == large-screen @media screen and (min-width: 1400px) @content
35. h1 font-size: 2em +respond-to(desktop) h1 font-size: 3em
36. Keep files small and readable
38. Nesting for brevity
39. #content h2 strong color: red &.foo font-size: 1.2em
40. Mixins for clarity
41. =custom-serif($weight: normal) font-family: "ff-tisa-web-pro", Georgia, serif @if $weight == bold font-weight: 700 @else font-weight: 300
42. h1 +custom-serif
43. =greyscale +prefixer(filter, grayscale(100%))
44. Plan for re–usability
45. Documentation
46. /* This comment is * several lines long. * since it uses the CSS comment syntax, * it will appear in the CSS output. */ body color: black // These comments are only one line long each. // They won't appear in the CSS output, // since they use the single-line comment syntax. a color: green
47. /* This comment is * several lines long. * since it uses the CSS comment syntax, * it will appear in the CSS output. */ body { color: black; } a { color: green; }
48. // @file colors.sass // // @description Colors definitions as Sass variables. // @authors Florian Plank (florian@polarblau.com)
50. Keep an (up–to–date) style guide
52. http://assets.warpspire.com/images/kss/styleguide-full.png
53. Semantic naming
54. “I’d describe semantics as it relates to HTML as tags, classes, IDs, and attributes describing but not specifying the content they enclose.” —Chris Coyier
55. <div class="column-1">Foo</div> <div class="large-text">Bar</div> <div class="big-and-bold">Bat</div>
56. <div class="column-1">Foo</div> <strong>Bat</strong> <div class="footer">Baz</div>
57. Decouple styles from mark–up structure?
58. .social li:nth-child(1) { … } .social li:nth-child(2) { … } .social li:nth-child(3) { … }
59. .social .twitter { … } .social .facebook { … } .social .linkedin { … }
60. Validate?
61. Use !important as a debugging tool (thing “console.log()”)
62. Test? (Selenium, JS, …)
63. … nitty gritty details
64. Indentation (flat, tree?) Position of braces Short form or long Class name separators
65. Legacy project
67. Fix readability
69. Remove unused styles
72. Extract variables (Sass)
73. Search and fix obvious duplication
74. —Specificity
75. specificity = a, b, c, d a = inline styles b = ID c = classes/attributes/pseudo–classes d = elements and pseudo–elements
76. h1 = 0, 0, 0, 1
77. #foo h1 = 0, 1, 0, 1
78. #foo #bar h1.bat = 0, 2, 1, 1
79. Fix naming
80. Search and fix obvious duplication
81. Split files
82. Quasi clean slate
83. HELP!
84. http://github/polarblau/perseus
85. Good luck!