Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Collaborative Style Syntax

Collaborative Style Syntax

There comes a time when designing a front-end styling system with the traditional values of OOCSS/BEM/SMACSS doesn't work. In order to build a slim, efficient, and flexible CSS codebase, I turned to projects like BassCSS and Tachyons for inspiration and found answers for not just the architectural challenges but communication challenges when using CSS in cross-functional teams.

This presentation covers a quick overview of "functional" CSS and how it's being used at Namely to establish a Collaborative Style Syntax.

42044f1ee7508caca62666863ae793da?s=128

HipsterBrown

October 20, 2015
Tweet

Transcript

  1. Collaborative Style Syntax

  2. Nick Hehr • empathetic community member • front-end developer at

    Namely • Hoodie & Tessel Contributor • Mustached Human • @hipsterbrown
  3. OVERVIEW • What is “functional” CSS? • Why is it

    nice at Namely? • Moving Forward
  4. What is “functional” CSS?

  5. Functional CSS is… • Immutable • Composable • Clearly Named

    • Flexible
  6. Immutable

  7. http:/ /csswizardry.com/2015/03/immutable-css/

  8. http:/ /johnotander.com/immutable-css/

  9. Composable

  10. https:/ /github.com/mrmrs/css-uncut

  11. https:/ /github.com/mrmrs/css-uncut

  12. Clearly Named

  13. http:/ /www.basscss.com/

  14. http:/ /www.basscss.com/docs/white-space/#margins

  15. http:/ /www.basscss.com/docs/colors/

  16. http:/ /tachyons.io/

  17. Flexible

  18. http:/ /www.basscss.com/customize/

  19. http:/ /tachyons.io/

  20. Why is it nice at Namely?

  21. GOALS • Consistency • Performance • Documentation

  22. CONSISTENCY

  23. Consistency • Shared Jargon (i.e. “what’s a popover?”) • Sensible

    Defaults • Abstracted Values (rems, hex colors, etc)
  24. PERFORMANCE

  25. http:/ /cssstats.com/stats?url=https%3A%2F%2Fnamely.namely.com

  26. 1.04 MB === A LOT OF CODE

  27. http:/ /cssstats.com/stats?url=http%3A%2F%2Ftheguardian.com&name=The%20Guardian

  28. http:/ /cssstats.com/stats?url=http%3A%2F%2Fetsy.com&name=Etsy

  29. http:/ /cssstats.com/stats?url=http%3A%2F%2Fgithub.com&name=GitHub

  30. http:/ /cssstats.com/stats?link=http%3A%2F%2Fnamely.surge.sh%2Fapp.css

  31. DOCUMENTATION

  32. Documentation • Self-Documenting (nearly) • Simpler Codebase • Finite

  33. http:/ /www.lightningdesignsystem.com/design/layout

  34. Moving Forward

  35. Namely UI

  36. Namely UI • Flexible set of React components • Library

    of functional CSS utilities • Self-Documenting (nearly) via static site
  37. https:/ /github.com/namely/styleguide

  38. http:/ /namely.surge.sh/

  39. Thank You