benjystanton/css-reading-list.md

## css-reading-list.md

      
    Raw
  

              css-reading-list.md
            
          
    CSS reading list


I'm looking for tips on updating old codebases, writing maintainable code and testing design changes.
https://twitter.com/benjystanton/status/1336640300744380417

Plan


CSS basics
Build tools / asset pipelines (e.g. Gulp)
Visual regression testing
Devtools (e.g. Coverage)
Naming conventions and scaling methodologies (e.g. CUBE CSS)
Modern layout techniques (e.g. CSS Grid)

Suggested CSS resources


CSS Basics

https://cssguidelin.es/
https://csswizardry.com/archive/
https://almanac.httparchive.org/en/2020/css
https://timseverien.com/posts/2020-12-06-what-makes-css-hard-to-master/


Visual regression testing

https://github.com/garris/BackstopJS


CUBE CSS

https://www.smashingmagazine.com/2020/06/smashing-podcast-episode-19/
https://piccalil.li/blog/cube-css/
https://cube.fyi/


Gulp

https://piccalil.li/course/learn-eleventy-from-scratch/lesson/18/
https://github.com/cferdinandi/gulp-boilerplate


Design Tokens

https://piccalil.li/tutorial/what-are-design-tokens
https://cube.fyi/resources/#heading-tools


Modern CSS layout

https://www.flexboxsimplified.com/
https://every-layout.dev/
https://www.smashingmagazine.com/2020/01/understanding-css-grid-container/
https://piccalil.li/course/learn-eleventy-from-scratch/
https://www.smashingmagazine.com/2016/11/css-inheritance-cascade-global-scope-new-old-worst-best-friends/
https://www.smashingmagazine.com/guides/css-layout/
https://www.smashingmagazine.com/2013/08/semantic-css-with-intelligent-selectors/
https://twitter.com/heydonworks/status/1255462784088891392


Devtools

https://developers.google.com/web/tools/chrome-devtools/coverage


Thanks


Matt Andrews
Joel Strohmeier
Simon Smith