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
Preview in Mapt
Code Files

Enduring CSS

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
Mapt Subscription
FREE
$29.99/m after trial
eBook
$22.40
RRP $31.99
Save 29%
Print + eBook
$39.99
RRP $39.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$22.40
$39.99
$29.99p/m after trial
RRP $31.99
RRP $39.99
Subscription
eBook
Print + eBook
Start 30 Day Trial

Frequently bought together


Enduring CSS Book Cover
Enduring CSS
$ 31.99
$ 22.40
Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile Book Cover
Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile
$ 26.99
$ 18.90
Buy 2 for $35.00
Save $23.98
Add to Cart
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 

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

Recommended for You

Object-Oriented JavaScript - Second Edition Book Cover
Object-Oriented JavaScript - Second Edition
$ 29.99
$ 21.00
Responsive Web Design with HTML5 and CSS3 - Second Edition Book Cover
Responsive Web Design with HTML5 and CSS3 - Second Edition
$ 31.99
$ 22.40
JavaScript at Scale Book Cover
JavaScript at Scale
$ 39.99
$ 28.00
Mastering Python Book Cover
Mastering Python
$ 31.99
$ 22.40
Learning TypeScript Book Cover
Learning TypeScript
$ 39.99
$ 28.00
Python Machine Learning Book Cover
Python Machine Learning
$ 35.99
$ 25.20