XXLCSS - How to scale CSS and keep your sanity

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

10. None

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

28. None

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

37. None

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

65. None

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

75. None

76. Preprocessors

77. Preprocessors Sass, that is.

78. CSS Frameworks

79. None

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