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
   

   View Slide

2. Nick Hehr
   • empathetic community member
   • front-end developer at Namely
   • Hoodie & Tessel Contributor
   • Mustached Human
   • @hipsterbrown
   

   View Slide

3. OVERVIEW
   • What is “functional” CSS?
   • Why is it nice at Namely?
   • Moving Forward
   

   View Slide

4. What is
   “functional” CSS?
   

   View Slide

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

   View Slide

6. Immutable
   

   View Slide

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

   View Slide

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

   View Slide

9. Composable
   

   View Slide

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

    View Slide

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

    View Slide

12. Clearly Named
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. http:/
    /tachyons.io/
    

    View Slide

17. Flexible
    

    View Slide

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

    View Slide

19. http:/
    /tachyons.io/
    

    View Slide

20. Why is it
    nice at Namely?
    

    View Slide

21. GOALS
    • Consistency
    • Performance
    • Documentation
    

    View Slide

22. CONSISTENCY
    

    View Slide

23. Consistency
    • Shared Jargon (i.e. “what’s a popover?”)
    • Sensible Defaults
    • Abstracted Values (rems, hex colors, etc)
    

    View Slide

24. PERFORMANCE
    

    View Slide

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

    View Slide

26. 1.04 MB
    ===
    A LOT OF CODE
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

31. DOCUMENTATION
    

    View Slide

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

    View Slide

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

    View Slide

34. Moving Forward
    

    View Slide

35. Namely UI
    

    View Slide

36. Namely UI
    • Flexible set of React components
    • Library of functional CSS utilities
    • Self-Documenting (nearly) via static site
    

    View Slide

37. https:/
    /github.com/namely/styleguide
    

    View Slide

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

    View Slide

39. Thank You
    

    View Slide