XXLCSS - How to scale CSS and keep your sanity

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.

1b8ad785acdd1ce1c99914b1c2a4e10e?s=128

Zaharenia Atzitzikaki

May 17, 2014
Tweet

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