Enduring CSS电子书

Enduring CSS

Enduring CSS

Credits

About the Author

Thanks

www.PacktPub.com

Why subscribe?

Preface

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

Defining the problem

Solve your own problems

2. The Problems of CSS at Scale

Specificity

Markup structure tied to selectors

The cascade

Summary

3. Implementing Received Wisdom

On OOCSS

Responsive web design, the Achilles heel of OOCSS

Responsive issues

Maintenance and iteration

An alien abstraction for new developers

A pure OOCSS example

SMACSS

BEM

Summary

4. Introducing the ECSS Methodology

Defining terminology

The problems ECSS solves

Dealing with specificity

This is !important

Embracing repetition

Zero component abstractions

The cost of repetition?

gzip is incredibly efficient at compressing repetitive strings

Summary

5. File Organisation and Naming Conventions

Project organisation

When same folder organisation isn't possible

Naming classes and selectors with ECSS

Reiterating the benefits

Source order becomes unimportant

Anatomy of the ECSS naming convention

Explanation of selector sections

Namespace

Module or Component

Child node

Variant

Doubling up on ECSS selectors

Summary

6. Dealing with State Changes in ECSS

How ECSS used to handle state change

Switching to WAI-ARIA

ARIA attributes as CSS selectors

States and properties, redone with ARIA

If ARIA can't be used

Summary

Additional information and statistics from the Royal National Institute for the Blind (RNIB)

7. Applying ECSS to Your Website or Application

Applying ECSS to logic modules

An example

Child nodes of a module or component

A note on type selectors

Applying ECSS to visual modules

Organising modules, their components, and naming files

Nodes within a component

Variants

Working with generated content from a CMS

ECSS and global styles

Summary

8. The Ten Commandments of Sane Style Sheets

Why the ten commandments?

Tooling

Rationale

Definitions used throughout:

1. Thou shalt have a single source of truth for all key selectors

Dealing with overrides

Standard override

Override with additional class on same element

Override when inside another class and also has an additional class

Override with media queries

2. Thou shalt not nest, unless thou art nesting media queries or overrides

Don't nest children within a rule

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)

Avoid @extends

With no font references

Using @includes

Using @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

9. Tooling for an ECSS Approach

CSS requisites for CSS processors

Building CSS from authoring style sheets

Save to compile, the journey of an ECSS style sheet

Stylelint

Optimisation

Summary

The closing curly brace

Resources

1. CSS Selector Performance

Testing selector speed

The difference between fastest and slowest selector

The slowest selector

Good CSS architecture practices

What does this mean?

Cause and effect

What difference does style bloat make?

Rules diet

Removing unused styles

Performance inside the brackets

What properties are expensive?

Summary

2. Browser Representatives on CSS Performance

TL;DR

Browser representatives on CSS performance

Should we worry about CSS selectors?

What about JavaScript

Dealing with CSS performance

Summary

Additional Information