Enduring CSS

Learn to really THINK about CSS, and how to create CSS that endures continual iteration, multiple authors, and yet always produces predictable results

Enduring CSS

This ebook is included in a Mapt subscription
Ben Frain

Learn to really THINK about CSS, and how to create CSS that endures continual iteration, multiple authors, and yet always produces predictable results
$0.00
$31.99
$39.99
$29.99p/m after trial
RRP $31.99
RRP $39.99
Subscription
eBook
Print + eBook
Start 30 Day Trial
Subscribe and access every Packt eBook & Video.
 
  • 4,000+ eBooks & Videos
  • 40+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
Code Files
Preview in Mapt

Book Details

ISBN 139781787282803
Paperback134 pages

Book Description

Learn with me, Ben Frain, about how to really THINK about CSS and how to use CSS for any size project! I'll show you how to write CSS that endures continual iteration, multiple authors, and yet always produces predictable results. Enduring CSS, often referred to as ECSS, offers you a robust and proven approach to authoring and maintaining style sheets at scale.

Enduring CSS is not a book about writing CSS, as in the stuff inside the curly braces. This is a book showing you how to think about CSS, and be a smarter developer with that thinking! It's about the organisation and architecture of CSS—the parts outside the braces. I will help you think about the aspects of CSS development that become the most difficult part of writing CSS in larger projects.

You’ll learn about the problems of authoring CSS at scale—including specificity, the cascade and styles intrinsically tied to document structure. I'll introduce you to the ECSS methodology, and show you how to develop consistent and enforceable selector naming conventions. We'll cover how to apply ECSS to your web applications and visual model, and how you can organize your project structure wisely, and handle visual state changes with ARIA, providing greater accessibility considerations. In addition, we'll take a deep look into CSS tooling and process considerations. Finally we will address performance considerations by examining topics such as CSS selector speed with hard data and browser-representative insight.

Table of Contents

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
SMACSS
BEM
Summary
Chapter 4: Introducing the ECSS Methodology
Defining terminology
The problems ECSS solves
Dealing with specificity
Embracing repetition
Zero component abstractions
The cost of repetition?
Summary
Chapter 5: File Organisation and Naming Conventions
Project organisation
Naming classes and selectors with ECSS
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
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
Applying ECSS to visual modules
Organising modules, their components, and naming files
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?
1. Thou shalt have a single source of truth for all key selectors
2. Thou shalt not nest, unless thou art nesting media queries or overrides
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)
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
Optimisation
Summary
The closing curly brace

What You Will Learn

  • The problems of CSS at scale—specificity, the cascade and styles intrinsically tied to element structure.
  • The shortfalls of conventional approaches to scaling CSS.
  • The ECSS methodology and the problems it solves.
  • How to develop consistent and enforceable selector naming conventions with ECSS.
  • How to organise project structure to more easily isolate and decouple visual components.
  • How to handle state changes in the DOM with ARIA or override selectors.
  • How to apply ECSS to web applications and visual modules.
  • Considerations of CSS tooling and processing: Sass/PostCSS and linting.
  • Addressing the notion of CSS selector speed with hard data and browser representative insight

Authors

Table of Contents

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
SMACSS
BEM
Summary
Chapter 4: Introducing the ECSS Methodology
Defining terminology
The problems ECSS solves
Dealing with specificity
Embracing repetition
Zero component abstractions
The cost of repetition?
Summary
Chapter 5: File Organisation and Naming Conventions
Project organisation
Naming classes and selectors with ECSS
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
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
Applying ECSS to visual modules
Organising modules, their components, and naming files
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?
1. Thou shalt have a single source of truth for all key selectors
2. Thou shalt not nest, unless thou art nesting media queries or overrides
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)
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
Optimisation
Summary
The closing curly brace

Book Details

ISBN 139781787282803
Paperback134 pages
Read More

Read More Reviews