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.

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