O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Enduring CSS

Book Description

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

About This Book

  • Address the problems of CSS at scale, avoiding the shortfalls of scaling CSS.
  • The shortfalls of conventional approaches to scaling CSS.
  • Develop consistent and enforceable selector naming conventions with ECSS.
  • Learn how to organize project structure to more easily isolate and decouple visual components.

Who This Book Is For

This is a book for working CSS authors involved in large projects. This is a book that tackles create enduring CSS for large-scale projects.

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

In Detail

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.

Style and approach

Learn with me, Ben Frain, about how to really think about CSS. This is a book to deal with writing CSS for large-scale, rapidly changing web projects and applications. This isn't a book about writing CSS, as in the stuff inside the curly braces - this is a book about the organisation and architecture of CSS; the parts outside the braces!

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Enduring CSS
    1. Enduring CSS
    2. Credits
    3. About the Author
    4. Thanks
    5. www.PacktPub.com
      1. Why subscribe?
    6. Preface
    7. 1. Writing Styles for Rapidly Changing, Long-lived Projects
      1. Defining the problem
      2. Solve your own problems
    8. 2. The Problems of CSS at Scale
      1. Specificity
      2. Markup structure tied to selectors
      3. The cascade
      4. Summary
    9. 3. Implementing Received Wisdom
      1. On OOCSS
        1. Responsive web design, the Achilles heel of OOCSS
        2. Responsive issues
        3. Maintenance and iteration
        4. An alien abstraction for new developers
        5. A pure OOCSS example
      2. SMACSS
      3. BEM
      4. Summary
    10. 4. Introducing the ECSS Methodology
      1. Defining terminology
      2. The problems ECSS solves
      3. Dealing with specificity
        1. This is !important
      4. Embracing repetition
      5. Zero component abstractions
      6. The cost of repetition?
        1. gzip is incredibly efficient at compressing repetitive strings
      7. Summary
    11. 5. File Organisation and Naming Conventions
      1. Project organisation
        1. When same folder organisation isn't possible
      2. Naming classes and selectors with ECSS
        1. Reiterating the benefits
          1. Source order becomes unimportant
        2. Anatomy of the ECSS naming convention
          1. Explanation of selector sections
          2. Namespace
          3. Module or Component
        3. Child node
          1. Variant
          2. Doubling up on ECSS selectors
      3. Summary
    12. 6. Dealing with State Changes in ECSS
      1. How ECSS used to handle state change
      2. Switching to WAI-ARIA
      3. ARIA attributes as CSS selectors
        1. States and properties, redone with ARIA
        2. If ARIA can't be used
      4. Summary
      5. Additional information and statistics from the Royal National Institute for the Blind (RNIB)
    13. 7. Applying ECSS to Your Website or Application
      1. Applying ECSS to logic modules
        1. An example
        2. Child nodes of a module or component
        3. A note on type selectors
      2. Applying ECSS to visual modules
      3. Organising modules, their components, and naming files
        1. Nodes within a component
          1. Variants
      4. Working with generated content from a CMS
      5. ECSS and global styles
      6. Summary
    14. 8. The Ten Commandments of Sane Style Sheets
      1. Why the ten commandments?
        1. Tooling
        2. Rationale
        3. Definitions used throughout:
      2. 1. Thou shalt have a single source of truth for all key selectors
        1. Dealing with overrides
          1. Standard override
          2. Override with additional class on same element
          3. Override when inside another class and also has an additional class
          4. Override with media queries
      3. 2. Thou shalt not nest, unless thou art nesting media queries or overrides
        1. Don't nest children within a rule
      4. 3. Thou shalt not use ID selectors, even if thou thinkest thou hast to
      5. 4. Thou shalt not write vendor prefixes in the authoring style sheets
      6. 5. Thou shalt use variables for sizing, colours and z-index
      7. 6. Thou shalt always write rules mobile first (avoid max-width)
      8. 7. Use mixins sparingly (and avoid @extend)
        1. Avoid @extends
          1. With no font references
          2. Using @includes
          3. Using @extend
      9. 8. Thou shalt comment all magic numbers and browser hacks
      10. 9. Thou shalt not place inline images in the authoring style sheets
      11. 10. Thou shalt not write complicated CSS when simple CSS will work just as well
      12. Summary
    15. 9. Tooling for an ECSS Approach
      1. CSS requisites for CSS processors
      2. Building CSS from authoring style sheets
        1. Save to compile, the journey of an ECSS style sheet
          1. Stylelint
      3. Optimisation
      4. Summary
      5. The closing curly brace
        1. Resources
    16. 1. CSS Selector Performance
      1. Testing selector speed
        1. The difference between fastest and slowest selector
        2. The slowest selector
      2. Good CSS architecture practices
        1. What does this mean?
        2. Cause and effect
      3. What difference does style bloat make?
        1. Rules diet
        2. Removing unused styles
      4. Performance inside the brackets
        1. What properties are expensive?
      5. Summary
    17. 2. Browser Representatives on CSS Performance
      1. TL;DR
      2. Browser representatives on CSS performance
      3. Should we worry about CSS selectors?
      4. What about JavaScript
      5. Dealing with CSS performance
      6. Summary
        1. Additional Information