- I see junior and senior devs. suffering with CSS over time, also hating it 😩
- We all know CSS can be hard to debug 🤔 🐞
- CSS is a core pillar of the W3C.
- CSS is awesome! You just need to understand how it works (as any other language).
- Promote code reusability, scalability and maintainability.
- Enjoy writing good CSS code, using something standard (no over complexities).
- Embrace CSS
♥️
- This Kata works with Hugo and Sass, as the later is kind of an industry standard. Also because its learning curve is lower than other tools.
- If you prefer to write this Kata with plain/vanilla CSS, feel free to do it*
(*) Just write plain CSS within the existing .scss files and the code should work 😉
- This is a refactoring Kata so please focus on improving the CSS code, not the UI look&feel.
- Clone GitHub repo:
git clone git@github.com:nadalsol/css-best-practices-refactoring-kata - Jump into project's directory:
cd css-best-practices-refactoring-kata - Install project dependencies:
npm install - Start the Hugo server (with drafts enabled):
npm start(which launcheshugo server -D) - Navigate to http://localhost:1313/
- Identify common patterns.
- Group them into components (chunks of UI).
- Identify & create variants (i.e. primary and secondary buttons).
- Reduce CSS specificity.
- Other optimisations (semantic names, reuse colors, spaces, fonts…).
💡 Edit or create new Hugo partials if you need to.
- Kata Presentation (Google Slides)
- Kata Repo (GitHub)
- CSS Best Practices @ Hack&Craft (by Nadal Soler) - Tech Talk Slides
- CSS Best Practices @ Hack&Craft (by Nadal Soler) - Tech Talk Video
- CSS Specificity with Plankton, Fish and Sharks
- MDN Web Docs - Cascade, specificity, and inheritance
- Por qué no uso "Tailwind CSS" en mi código (Spanish)
- The CSS Cascade - Or, How browsers resolve competing CSS styles (by Amelia Wattenberger)
- The reason why many people struggle with CSS (by Kevin Powell)