Search icon CANCEL
Subscription
0
Cart icon
Cart
Close icon
You have no products in your basket yet
Save more on your purchases!
Savings automatically calculated. No voucher code required
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
Enduring CSS
Enduring CSS

Enduring CSS: Create robust and scalable CSS for any size web project

By Mr. Benjamin Frain
$31.99 $21.99
Book Jan 2017 134 pages 1st Edition
eBook
$31.99 $21.99
Print
$39.99
Subscription
Free Trial
Renews at $15.99p/m
eBook
$31.99 $21.99
Print
$39.99
Subscription
Free Trial
Renews at $15.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Table of content icon View table of contents Preview book icon Preview Book

Enduring CSS

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 a team on a large CSS codebase, I'm sure some of what I'm describing will sound familiar.

Therefore, at the outset of my journey, I defined some basic needs. More simply, these were the problems that any new CSS authoring approach had to solve. Here is the list of those needs:

  • To allow the easy maintenance of a large CSS codebase over time

  • To allow portions of CSS code to be removed from the codebase without effecting the remaining styles

  • To make it possible to rapidly iterate on any new designs

  • Changing the properties and values that applied to one visual element should not unintentionally effect others

  • Any solution should require minimal tooling and workflow changes to implement

  • Where possible, W3C standards such as ARIA should be used to communicate state change within the user interface

In the next chapter we are going to look more specifically at these problems. However, first, an important cautionary note.

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.

Left arrow icon Right arrow icon

Key benefits

  • • 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.

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.

What you will learn

What you will learn from this book • 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

Product Details

Country selected

Publication date : Jan 17, 2017
Length 134 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781787282803
Category :
Languages :
Concepts :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want

Product Details


Publication date : Jan 17, 2017
Length 134 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781787282803
Category :
Languages :
Concepts :

Table of Contents

17 Chapters
Enduring CSS Chevron down icon Chevron up icon
Credits Chevron down icon Chevron up icon
About the Author Chevron down icon Chevron up icon
Thanks Chevron down icon Chevron up icon
www.PacktPub.com Chevron down icon Chevron up icon
Preface Chevron down icon Chevron up icon
1. Writing Styles for Rapidly Changing, Long-lived Projects Chevron down icon Chevron up icon
2. The Problems of CSS at Scale Chevron down icon Chevron up icon
3. Implementing Received Wisdom Chevron down icon Chevron up icon
4. Introducing the ECSS Methodology Chevron down icon Chevron up icon
5. File Organisation and Naming Conventions Chevron down icon Chevron up icon
6. Dealing with State Changes in ECSS Chevron down icon Chevron up icon
7. Applying ECSS to Your Website or Application Chevron down icon Chevron up icon
8. The Ten Commandments of Sane Style Sheets Chevron down icon Chevron up icon
9. Tooling for an ECSS Approach Chevron down icon Chevron up icon
1. CSS Selector Performance Chevron down icon Chevron up icon
2. Browser Representatives on CSS Performance Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Empty star icon Empty star icon Empty star icon Empty star icon Empty star icon 0
(0 Ratings)
5 star 0%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
Top Reviews
No reviews found
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.