Enduring CSS Architect and maintain large scale CSS codebases by Ben Frain
Contents of Enduring CSS eBook
- Chapter 1. Enduring CSS
- Introduction
- Defining the problem
- Solve your own problems
- Chapter 2. The problems of CSS at scale
- Specificity
- Markup structure tied to selectors
- The cascade
- Summary
- Chapter 3. Implementing perceived wisdom
- On OOCSS
- SMACSS
- BEM
- Summary
- Chapter 4. Introducing ECSS
- Defining terminology
- The problems ECSS solves
- Embracing Repetition
- Chapter 5. File organisation and naming conventions
- Project organisation
- Naming classes and selectors with ECSS
- Summary
- Chapter 6. Dealing with state
- How ECSS used to handle state change
- Switching to WAI-ARIA
- ARIA attributes as CSS selectors
- Summary
- Chapter 7. Applying ECSS to web applications
- An example
- Child nodes of a module or component
- A note on type selectors
- Applying ECSS methodology with visual components
- Organising Modules, their Components and naming files
- A note on working with generated content from a CMS
- Summary
- Chapter 8. The Ten Commandments of Sane Style Sheets
- Why the ten commandments?
- Thou shalt have a single source of truth for all key selectors
- Thou shalt not nest (unless thou art nesting media queries,
- overrides or thou really hast to)
- Thou shalt not use ID selectors (even if thou thinkest thou hast to)
- Thou shalt not write vendor prefixes in the authoring style sheets
- Thou shalt use variables for sizing, colours and z-index
- Thou shalt always write rules mobile first (avoid max-width)
- Use mixins sparingly (and avoid @extend)
- Thou shalt comment all magic numbers and browser hacks
- Thou shalt not place inline images in the authoring style sheets
- Thou shalt not write complicated CSS when simple CSS will
- work just as well
- Chapter 9. Tooling for an ECSS approach
- CSS requisites for CSS processors
- Building CSS from authoring style sheets
- Summary
- The closing curly brace
- Resources
- Appendix : CSS selector performance
- Testing selector speed
- Good CSS architecture practices
- What difference does style bloat make?
- Performance inside the brackets
- Appendix : Browser representatives on CSS performance
- Browser representatives on CSS performance
- Should we worry about CSS selectors?
- What about JavaScript
- Dealing with CSS performanceF
