Enduring CSS
Create robust and scalable CSS for any size web project
Published on 8. July 2025
134 pages
978-1-78728-453-1 (ISBN)
Description
No detailed description available for "Enduring CSS".
All prices
More details
Edition
Digital original
Language
English
Place of publication
Birmingham
United Kingdom
Target group
Professional and scholarly
US School Grade: College Graduate Student
Edition type
Digital original
File size
0,29 MB
ISBN-13
978-1-78728-453-1 (9781787284531)
Copyright in bibliographic data and cover images is held by Nielsen Book Services Limited or by the publishers or by their respective licensors: all rights reserved.
Schweitzer Classification
Other editions
Additional editions
Person
Frain Ben :
Ben Frain has been a web designer/developer since 1996. He is currently employed as a UI-UX Technical Lead at bet365. Before the web, he worked as an underrated (and modest) TV actor and technology journalist, having graduated from Salford University with a degree in Media and Performance. He has written four equally underrated (his opinion) screenplays and still harbors the (fading) belief he might sell one. Outside of work, he enjoys simple pleasures: books, films and raising a family.
Ben Frain has been a web designer/developer since 1996. He is currently employed as a UI-UX Technical Lead at bet365. Before the web, he worked as an underrated (and modest) TV actor and technology journalist, having graduated from Salford University with a degree in Media and Performance. He has written four equally underrated (his opinion) screenplays and still harbors the (fading) belief he might sell one. Outside of work, he enjoys simple pleasures: books, films and raising a family.
Content
- Cover
- Copyright
- Credits
- About the Author
- Thanks
- www.PacktPub.com
- Table of Contents
- Preface
- Chapter 1: Writing Styles for Rapidly Changing, Long-lived Projects
- 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 Received Wisdom
- On OOCSS
- Responsive web design, the Achilles heel of OOCSS
- Responsive issues
- Maintenance and iteration
- An alien abstraction for new developers
- A pure OOCSS example
- SMACSS
- BEM
- Summary
- Chapter 4: Introducing the ECSS Methodology
- Defining terminology
- The problems ECSS solves
- Dealing with specificity
- This is !important
- Embracing repetition
- Zero component abstractions
- The cost of repetition?
- gzip is incredibly efficient at compressing repetitive strings
- Summary
- Chapter 5: File Organisation and Naming Conventions
- Project organisation
- When same folder organisation isn't possible
- Naming classes and selectors with ECSS
- Reiterating the benefits
- Source order becomes unimportant
- Anatomy of the ECSS naming convention
- Explanation of selector sections
- Namespace
- Module or Component
- Child node
- Variant
- Doubling up on ECSS selectors
- Summary
- Chapter 6: Dealing with State Changes in ECSS
- How ECSS used to handle state change
- Switching to WAI-ARIA
- ARIA attributes as CSS selectors
- States and properties, redone with ARIA
- If ARIA can't be used
- Summary
- Additional information and statistics from the Royal National Institute for the Blind (RNIB)
- Chapter 7: Applying ECSS to Your Website or Application
- Applying ECSS to logic modules
- An example
- Child nodes of a module or component
- A note on type selectors
- Applying ECSS to visual modules
- Organising modules, their components, and naming files
- Nodes within a component
- Variants
- Working with generated content from a CMS
- ECSS and global styles
- Summary
- Chapter 8: The Ten Commandments of Sane Style Sheets
- Why the ten commandments?
- Tooling
- Rationale
- Definitions used throughout:
- 1. Thou shalt have a single source of truth for all key selectors
- Dealing with overrides
- Standard override
- Override with additional class on same element
- Override when inside another class and also has an additional class
- Override with media queries
- 2. Thou shalt not nest, unless thou art nesting media queries or overrides
- Don't nest children within a rule
- 3. Thou shalt not use ID selectors, even if thou thinkest thou hast to
- 4. Thou shalt not write vendor prefixes in the authoring style sheets
- 5. Thou shalt use variables for sizing, colours and z-index
- 6. Thou shalt always write rules mobile first (avoid max-width)
- 7. Use mixins sparingly (and avoid @extend)
- Avoid @extends
- With no font references
- Using @includes
- Using @extend
- 8. Thou shalt comment all magic numbers and browser hacks
- 9. Thou shalt not place inline images in the authoring style sheets
- 10. Thou shalt not write complicated CSS when simple CSS will work just as well
- Summary
- Chapter 9: Tooling for an ECSS Approach
- CSS requisites for CSS processors
- Building CSS from authoring style sheets
- Save to compile, the journey of an ECSS style sheet
- Stylelint
- Optimisation
- Summary
- The closing curly brace
- Resources
- Appendix 1: CSS Selector Performance
- Testing selector speed
- The difference between fastest and slowest selector
- The slowest selector
- Good CSS architecture practices
- What does this mean?
- Cause and effect
- What difference does style bloat make?
- Rules diet
- Removing unused styles
- Performance inside the brackets
- What properties are expensive?
- Summary
- Appendix 2: Browser Representatives on CSS Performance
- TL
- DR
- Browser representatives on CSS performance
- Should we worry about CSS selectors?
- What about JavaScript
- Dealing with CSS performance
- Summary
- Additional Information
- Appendix
- Index
