Engineering Learning Lunch on Writing CSS as a Team

Engineering Learning Lunch on Writing CSS as a Team

I decided to share a few tips around writing CSS with our engineering team as we think more about scalability and the growth of our team and consequently, our code.

Cbfa54275010d81ff786ef9b2a711d38?s=128

Julie Ann Horvath

July 30, 2015
Tweet

Transcript

  1. CSS is super cool

  2. 1. Class selectors, 2. BEM naming conventions, 3. Listing css

    properties, 4. the impact of nesting
  3. Performant selectors

  4. .selector {…}

  5. <div class=“selector”>…</div>

  6. The difference between the best & worse case scenario targeting

    class selectors is surprisingly small
  7. Δ = 50ms

  8. “The focus should be on scalable CSS.” - Nicole Sullivan

  9. Readability

  10. Specificity > Brevity

  11. vs. .profile-loading-indicator .loading

  12. BEM

  13. Block__element--Modifier

  14. <div class="alert alert--error”></div>

  15. .grid__col .grid__col--centered

  16. None
  17. “Follow the rules of semantics—make classes descriptive and not reliable

    on appearance of the given element.” - &yeT StyleGuide
  18. listing properties

  19. our compiled CSS shows re-ordered CSS properties

  20. SO, we should base how we order them in our

    css files on what's easiest to search for, read, and debug.
  21. a. Display properties (or things that affect the box model

    of an element or object) B. Type (things that affect how fonts are displayed and positioned & their corresponding Visual Styles) c. Decorative properties (properties that are specific to decoration on structural [non-typographic elements) D. Animations and/or element transitions
  22. .block__element { box-sizing: border-box; display: block; height: $height; width: $width;

    margin: 0 auto; padding: 0; color: $color; font-family: $Open-Sans; font-size: 16px; /* px or rem preferred */ line-height: 1.5; /* integers preferred */ text-align: center; background: $bg-color url('images/bg.jpeg'); background-color: $bg-color; background-image: url('images/bg.jpeg'); background-position: center center; background-repeat: no-repeat; background-size: cover; border: 1px solid $border-color; }
  23. "Would you write an email with no spaces?" - dan

    eden, animate.css
  24. nesting

  25. nesting isn’t great

  26. nesting gives you unwavering control over the styling and positioning

    of an element
  27. it also allows you to be specific

  28. but it does these things at the cost of readable

    or legible code
  29. as well as modularization and/or reusability

  30. debugging deeply nested css can be a pain

  31. typically getting around deeply nested styles (quickly) requires overriding the

    css with new (nested) styles
  32. = a hot mess with too many page- specific styles

  33. hard to maintain

  34. hard to Debug

  35. not performant

  36. we should prioritize specificity and longevity

  37. .box-thing .box-thing-1 {…}

  38. CSS rules parse right to left.

  39. .box__thing {…} .box__thing--modifying-styles {…}

  40. "The descendant selector is the most expensive selector in CSS."

    - Dave Hyatt
  41. hell yeah, css!