Book Image

Enduring CSS

By : Ben Frain
Book Image

Enduring CSS

By: Ben Frain

Overview of this book

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 (17 chapters)
Enduring CSS
Credits
About the Author
Thanks
www.PacktPub.com
Preface
Free Chapter
1
Writing Styles for Rapidly Changing, Long-lived Projects
3
Implementing Received Wisdom

Solve your own problems


I believe in Pin Cing Do, which translates roughly as the The way of pragmatic coding (https://benfrain.com/be-better-front-end-developer-way-of-pragmatic-coding/). This means solving the problems you actually have. Therefore, I'll state something up front that may be obvious to some:

It may be that the problems I had were not the problems you have. As such, you should temper the advice and approach offered herein accordingly. Alternatively, consider that your needs may be better addressed by different approaches and methodologies. I'm not going to try and convince you that ECSS is necessarily the best solution in all situations. For example:

  • ECSS won't give you the smallest possible CSS footprint (consider Atomic CSS (http://acss.io/) for that).

  • It isn't widely used and documented (consider BEM (https://en.bem.info/) if ubiquity is a major concern).

  • ECSS does not abstract styles and allow styling of elements from a bunch of specific utility classes. You should look at OOCSS and read the writing of its many advocates for that.

OK, public service announcement out of the way. Let's head on to the next chapter. This is where we'll look at the principle problems of scaling and architecting CSS for large scale projects: specificity, the cascade, isolation and selectors tied to structural elements.