XXLCSS - How to scale CSS and keep your sanity

"Web" design has changed. Now is the time to stop and rethink our best practices. Which are the new, better practices and tools that will help us keep our sanity while scaling big projects?

Slides from UpNorth Conference in Athens, Greece.

Transcript

1. XXLCSS How to scale CSS and keep your sanity @sugarenia
2. XXLCSS How to scale CSS and keep your sanity @sugarenia
3. I’m Sugar.
4. I’m a designer.
5. I’m happy.
6. Web design is awesome!
7. Web design is awesome! ...sometimes
8. The problem
9. Maintainability
11. OOCSS
12. OOCSS SMACSS
13. OOCSS SMACSS Sass
14. OOCSS SMACSS Sass Bootstrap & Foundation
15. The goals
16. GOAL #1 Don’t start from scratch every time
17. GOAL #2 Markup standards, especially for large teams
18. GOAL #3 Don’t bug your designers about ALL THE THINGS
19. GOALS #4, #5 & #6 Flexibility Speed Performance
20. GOAL #7 Own the code
21. Best practices
22. Avoid classitis
23. Avoid extra markup
24. Non-semantic class names
25. Use descendant selectors
26. No.
27. Better practices
29. Developers know better
30. Developers know better
31. Developers know better Abstraction
32. Developers know better Abstraction Object orientation
33. Developers know better Abstraction Object orientation Performance first
34. Developers know better Abstraction Object orientation Performance first DRY
35. Developers know better Abstraction Object orientation Performance first DRY KISS
36. No IDs in CSS please
38. #header #footer
39. #header #footer #footer { background-color: #000; }
40. #header #footer #footer { background-color: #000; } #footer a { color: #fff; }
41. #header #footer .twitter #footer { background-color: #000; } #footer a { color: #fff; }
42. #header #footer .twitter #footer { background-color: #000; } #footer a { color: #fff; } .twitter { background-color: #fff; }
43. #header #footer .twitter #footer { background-color: #000; } #footer a { color: #fff; } .twitter { background-color: #fff; } .twitter a { color: #000; }
44. #header #footer .twitter #footer { background-color: #000; } #footer a { color: #fff; } .twitter { background-color: #fff; } .twitter a { color: #000; }
45. Semantic?
46. Semantic? Pragmatic.
47. <div class="content"> <h1>Big heading</h1> </div> <div class="sidebar"> <h2>Sidebar heading</h2> </div> <div class="footer"> <h4>Footer heading</h4> </div>
48. <div class="content"> <h1>Big heading</h1> </div> <div class="sidebar"> <h2>Sidebar heading</h2> </div> <div class="footer"> <h4>Footer heading</h4> </div> h1 { font-size: 3em; } h2 { font-size: 2.4em; } h3 { font-size: 2em; } h4 { font-size: 1.6em; }
49. <div class="content"> <h1>Big heading</h1> </div> <div class="sidebar"> <h2>Sidebar heading</h2> </div> <div class="footer"> <h4>Footer heading</h4> </div> h1 { font-size: 3em; } h2, .footer h4 { font-size: 2.4em; } h3 { font-size: 2em; } h4 { font-size: 1.6em; }
50. <div class="content"> <h1>Big heading</h1> </div> <div class="sidebar"> <h2>Sidebar heading</h2> </div> <div class="footer"> <h4 class="beta">Footer heading</h4> </div> h1, .alpha { font-size: 3em; } h2, .beta { font-size: 2.4em; } h3, .gamma { font-size: 2em; } h4, .delta { font-size: 1.6em; }
51. Style classes are totally OK, dude
52. Classes work much better when we use them to represent visual semantics, rather than keeping them tied to content. — Nicole Sullivan (@stubbornella)
53. <div class="about-box"> ... </div>
54. <div class="box box-hi box-large"> ... </div>
55. Descendant selectors can bite you
56. <div class="box"> <h3>This is the box header</h3> </div>
57. <div class="box"> <h3>This is the box header</h3> </div> .box { background-color: #fff; border: 1px solid #ccc; } .box h3 { text-transform: uppercase; color: #333; }
58. <div class="box"> <h4>This is the box header</h4> </div>
59. <div class="box"> <h4>This is the box header</h4> </div> .box { background-color: #fff; border: 1px solid #ccc; } .box h3, .box h4 { text-transform: uppercase; color: #333; }
60. <div class="box"> <h3 class="box-header">This is the box header</h3> </div> .box { background-color: #fff; border: 1px solid #ccc; } .box-header { text-transform: uppercase; color: #333; }
61. Modularize
62. Stop overdesigning
63. Stop thinking in pages
64. Everything is a module
66. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a posuere velit.
67. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a posuere velit.
68. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a posuere velit.
69. <div class="media"> <a href="http://twitter.com/stubbornella" class="img"> <img src="profile_image.jpg" alt="me" /> </a> <div class="bd"> @Stubbornella 14 minutes ago </div> </div>
70. .media, .bd { overflow:hidden; } .media .img { float:left; margin-right: 10px; } .media .img img { display:block; } .media .imgExt { float:right; margin-left: 10px; }
71. Do one thing and one thing only
72. Combine modules for fun and profit
73. Modules should be oblivious of their context
74. Toolbox
76. Preprocessors
77. Preprocessors Sass, that is.
78. CSS Frameworks
80. ...or UI Toolkits?
81. The time saved using a css framework is spent looking up how to work with that framework. — Jesse Shawl (@jshawl)
82. Updating is hell
83. MY ADVICE Roll your own framework
84. Living style guides
85. http://style.codeforamerica.org
86. http://patterns.alistapart.com
87. Better collaboration
88. Avoid code duplication
89. Easy device testing
90. http://vinspee.me/style-guide-guide/
91. Do try this at home.
92. Thanks! You rock. @sugarenia