Enduring CSS

Ben Frain

• Publisher: Packt Publishing
• Year: 2017
• ISBN:
  9781787282803
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in HTML
• Index: Computer Science

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!

Enduring CSS

---

Enduring CSS

Copyright © 2017 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: January 2017

Production reference: 2120117

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-78728-280-3

www.packtpub.com

Credits

Author Ben Frain	Indexer Pratik Shirodkar
Acquisition Editor Dominic Shakeshaft	Production Coordinator Deepika Naik
Technical Editor Devesh Chugh

About the Author

Ben Frain, Senior Front-end Developer at bet365, is a widely respected CSS developer and industry thought leader. Ben is the author of two successful and widely respected books Responsive Web Design with HTML5 and CSS3 and Sass and Compass for Designers, both published by Packt Publishing. Ben lives in Cheshire, England with his wife and two children. You can follow him on Twitter at http://twitter.com/benfrain and at his website (http://benfrain.com).

Thanks

I'd like to extend my thanks to a few people who directly or indirectly helped in getting this book written.

Firstly, Matthew Mitchell (http://mattmitchell.co.uk), who provided the http://ecss.io website design, and endures (pun intended) my constant blathering about CSS.

I'd also like to thank my work colleagues at bet365, principally Pete Griffiths (http://twitter.com/kungfusheep) who encouraged the development teams to make use of the ECSS approach on a grand scale.

Finally, I'd like to thank my long-suffering wife for allowing me to 'tap away' in the kitchen for countless hours in order to get this stuff out of my head.

www.PacktPub.com

For support files and downloads related to your book, please visit www.PacktPub.com.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

https://www.packtpub.com/mapt

Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career.

Why subscribe?

• Fully searchable across every book published by Packt
• Copy and paste, print, and bookmark content
• On demand and accessible via a web browser

Preface

This is a little book that encapsulates my current thinking on how best to write and maintain CSS codebases for rapidly changing, long-lived web projects.

• There is no framework to download
• There are no requisite tools (although there are opinionated guidelines for what tooling should provide)
• Nothing is written for you

Put metaphorically, Enduring CSS is not giving you fish; it's teaching you how to fish.

It's a methodology for writing CSS that once implemented, will provide your project with a predictable, and easy to maintain CSS codebase.

The earliest iterations of Enduring CSS were first documented in August 2014, in the blog post, Enduring CSS: writing style sheets for rapidly changing, long-lived projects (https://benfrain.com/enduring-css-writing-style-sheets-rapidly-changing-long-lived-projects/).

However, the ECSS approach has developed a little since then and so this book should be considered the canonical resource on the approach.

I hope you enjoy reading it.

Ben Frain

Chapter 1. Writing Styles for Rapidly Changing, Long-lived Projects

This isn't actually a book about writing CSS, as in the stuff inside the curly braces. It's a book about the organising and architecture of CSS; the parts outside the braces. It's the considerations that can be happily ignored on smaller projects but actually become the most difficult part of writing CSS in larger projects.

Terms like CSS at scale, or Large-scale CSS can seem quite nebulous. I'll try and clarify.

When people talk about large scale CSS or writing CSS at scale there can be a few possible metrics that relate to the large or big part of the description:

• It might be CSS that simply has a large file size. There's a lot of CSS output and so making changes to that codebase can be difficult, as there is so much of the code to consider.
• The CSS could be said to be large due to the complexity of the user interface that is being built with it. The overall file size may be smaller than the first situation but there may be a great many pieces of user interface that's codified in those styles. Considering how to effect changes across all of those visuals may be problematic.
• It might be large CSS simply due to the number of developers that have, are, and will be likely to touch and change the CSS codebase.

Or, it can be all the above.

Defining the problem

Enduring CSS was born from my own need to define a rational approach to writing CSS on large scale web applications.

The definition of what makes something a web application as opposed to merely a web page can be divisive so let's put that aside for now. Let's simply consider the scenario in which a new approach to writing CSS was needed.

Consider an interface that was, by necessity, densely populated with visual components; sliders, buttons, input fields etc.

In addition, consider that this interface was (and is) constantly evolving and needed to be changed rapidly. Furthermore, any changes might be made by any number of different style sheet authors.

Without a clearly defined CSS writing methodology, through the many iterations, the CSS was always out of hand. The style sheets were in a perpetual state of entropy as a result of mixed approaches, different levels of technical understanding between authors and code documentation that varied greatly in quality.

So the result was CSS that was difficult to iterate upon, hard to reason about and nobody was ever quite sure where redundancy lay. Worse still, style sheet authors lacked the confidence to remove code for fear of inadvertently effecting other parts of the application.

If you've ever inherited or worked in ...