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
   

   View Slide

2. @polarblau
   

   View Slide

3. ( https://github.com/polarblau/maintainable-stylesheets/ )
   

   View Slide

4. Alltag
   (Everyday life)
   

   View Slide

5. Technical debt Confidence LOC
   

   View Slide

6. Alltag & Stylesheets
   

   View Slide

7. Technical debt Confidence LOC
   

   View Slide

8. Why?
   What makes the work
   with stylesheets painful?
   

   View Slide

9. It’s too easy!
   

   View Slide

10. It’s easy to learn,
    everybody can do it!
    

    View Slide

11. It’s easy to read,
    but hard to
    comprehend.
    

    View Slide

12. It’s easy to start,
    but hard to scale.
    

    View Slide

13. Let’s get serious!
    

    View Slide

14. programming == serious_business
    css == programming
    

    View Slide

15. View Slide

16. New Legacy
    

    View Slide

17. New project
    

    View Slide

18. Define all rules!
    

    View Slide

19. Distribute all the rules!
    

    View Slide

20. Enforce all the rules!
    

    View Slide

21. View Slide

22. Rules:
    

    View Slide

23. Version control
    

    View Slide

24. What would do?
    

    View Slide

25. HTML
    

    View Slide

26. Stay clear of frameworks
    

    View Slide

27. Keep styles where they belong
    

    View Slide

28. Files
    

    View Slide

29. Composition / Color / Type
    Elements of a visual language
    

    View Slide

30. /layout
    /colors
    /typography
    

    View Slide

31. /layout
    /colors
    /typography
    /helpers
    /base (reset, etc.)
    /ie
    /print
    

    View Slide

32. 
    

    View Slide

33. Media queries?
    

    View Slide

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
    

    View Slide

35. h1
    font-size: 2em
    +respond-to(desktop)
    h1
    font-size: 3em
    

    View Slide

36. Keep files small and readable
    

    View Slide

37. View Slide

38. Nesting for brevity
    

    View Slide

39. #content
    h2
    strong
    color: red
    &.foo
    font-size: 1.2em
    

    View Slide

40. Mixins for clarity
    

    View Slide

41. =custom-serif($weight: normal)
    font-family: "ff-tisa-web-pro", Georgia, serif
    @if $weight == bold
    font-weight: 700
    @else
    font-weight: 300
    

    View Slide

42. h1
    +custom-serif
    

    View Slide

43. =greyscale
    +prefixer(filter, grayscale(100%))
    

    View Slide

44. Plan for re–usability
    

    View Slide

45. Documentation
    

    View Slide

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
    

    View Slide

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; }
    

    View Slide

48. // @file colors.sass
    //
    // @description Colors definitions as Sass variables.
    // @authors Florian Plank (florian@polarblau.com)
    

    View Slide

49. View Slide

50. Keep an (up–to–date)
    style guide
    

    View Slide

51. View Slide

52. http://assets.warpspire.com/images/kss/styleguide-full.png
    

    View Slide

53. Semantic naming
    

    View Slide

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
    

    View Slide

55. Foo
    Bar
    Bat
    

    View Slide

56. Foo
    Bat
    Baz
    

    View Slide

57. Decouple styles from
    mark–up structure?
    

    View Slide

58. .social li:nth-child(1) { … }
    .social li:nth-child(2) { … }
    .social li:nth-child(3) { … }
    

    View Slide

59. .social .twitter { … }
    .social .facebook { … }
    .social .linkedin { … }
    

    View Slide

60. Validate?
    

    View Slide

61. Use !important as
    a debugging tool
    (thing “console.log()”)
    

    View Slide

62. Test?
    (Selenium, JS, …)
    

    View Slide

63. … nitty gritty details
    

    View Slide

64. Indentation (flat, tree?)
    Position of braces
    Short form or long
    Class name separators
    

    View Slide

65. Legacy project
    

    View Slide

66. View Slide

67. Fix readability
    

    View Slide

68. View Slide

69. Remove unused styles
    

    View Slide

70. View Slide

71. View Slide

72. Extract variables (Sass)
    

    View Slide

73. Search and fix
    obvious duplication
    

    View Slide

74. —Specificity
    

    View Slide

75. specificity = a, b, c, d
    a = inline styles
    b = ID
    c = classes/attributes/pseudo–classes
    d = elements and pseudo–elements
    

    View Slide

76. h1 = 0, 0, 0, 1
    

    View Slide

77. #foo h1 = 0, 1, 0, 1
    

    View Slide

78. #foo #bar h1.bat = 0, 2, 1, 1
    

    View Slide

79. Fix naming
    

    View Slide

80. Search and fix
    obvious duplication
    

    View Slide

81. Split files
    

    View Slide

82. Quasi clean slate
    

    View Slide

83. HELP!
    

    View Slide

84. http://github/polarblau/perseus
    

    View Slide

85. Good luck!
    

    View Slide