Welcome to ECSS!

Introduction

Efficient CSS is all you need to avoid common styling problems. Nothing more, really. ECSS sets simple rules for efficient styling. No more naming everything, no more technological dependencies. Only intentional, consistent, expressive, predictable, sustainable CSS.

Install & Get Started!

Want help enforcing rules? 👮 Gently nudge you and your team into ECSS.
Install the Stylelint config
Eager to build something? 🏁 A quick & efficient starting point is within reach!

Why ECSS?

Because CSS as a language is misunderstood and undeservedly maligned. Because simple rules and low impact tools can go a long way in making sure the CSS codebase is light, simple and scalable. ECSS is a global approach to producing efficient design systems with CSS.

Values

Intentionality: Clear objectives, rational decisions. Every parcel of CSS has an objective. This objective should be clear to anyone reading the code. Be it HTML or CSS. Selectors are the perfect vehicle for intentionality. ECSS incentivizes the use of rational selectors.

Consistency: Repeating patterns save time & energy. Flexible naming guidelines give the codebase a consistency encouraging standardization and reuse. Prefixes and usage guidelines enforced through linting insures everyone on your team will follow ECSS rules.

Simplicity: “Simple” is writing less code & and limiting dependencies. Class soup & divitis aren’t simple. Untold numbers of@mediaqueries aren’t either. But modern CSS is. By accepting CSS for what it is (a designing language!) you can doa lotof styling mileage with very little code.

Expressivity: Code that speaks for itself is actually achievable. “thumbnail as-circle with-border” is instantly understandable while “h-10 w-10 bdr-50 br-1 overh” is not. Code should communicate information. The clearer the information, the easier it is to understand the system. Mistaken semantics should give way to expressiveness.

Predictability: Using simple but consistent authoring rules leads to predictability. It feels good to dive into unknown code… while already knowing what it looks like. Consistency, repeating patterns, simplicity (yes, again) all coalesce into predictable code. And predictable code means less stress, less friction and happier teams!

Sustainability: Vanilla CSS is future ready. In practice it means being at the forefront of progress and evolution. No need to wait for third parties to implement new features. You can useclamp()as of now and say goodbye to 80% of your media queries. No moresm-this md-that. Only clean and modern code.

Guiding principles

CSS is a designing language, not a scripting one. CSS authoring should reflect design patterns, concepts and perspectives. With global (sorry) scales, tokens, rules, etc. you limit repetition and facilitate future styling extension.

Empowering designers to refine their work autonomously is efficient. Making the needed parts of CSS being intelligible (code-savvy or not!) to designers cuts stress, time and promotes good allocation of human resources. Refining design in the browser is a great vector of economic profitability.

Not all CSS properties are born equal. The box-model properties (display,position,width, etc.) are extremely sensitive and potentially way more disruptive than, say, color or typographic ones. The former are the stuff of professional CSS authors and the latter are the ones designers should be able to use, modify and experiment with in context.

Properties & units have specific roles and usage. Limiting their use to these roles enhances clarity and promotes consistency as well as predictability. The same goes for units. Some suggest type, others, images or rhythm. Use them intentionally & rationally to communicate meaning.

Components and patterns need structure. Trying to abstract it away is vain. Instead, documentation and diligence are key. HTML is semantically rich, so choose the right tags and refrain from changing them for superficial reasons. One would not remove or changeclass="header"without understanding its purpose first, then one should not change or remove

on a whim either.

CSS Selectors are vehicles for intention. Every selector particle must have a purpose and if not, must be discarded with. This extraneousdivin.carddiv h2is what makes CSS brittle. These arenot“best practices”.

Selector types all have a function. Each one of them may be of use in a certain context. No absolute usage rule should be edicted. It’s not “always” or “never” but “it depends” and “why”. Absolute rules absolutely corrupt. Or something like that.

Selection specificity should be harnessed, not rejected. Nevertheless, “always” (ahem) keep it as low as possible. Yes, in 2015 it may have not been easy. But it’s 2023 andnewfeaturesare now widely supported. Use them.

Global scope in CSS is not a sin. Remember,CSS is a designing languageand the global scope fits perfectly in design’s fundamentally layered, dimensional approach. Programming best practices are not necessarily designing best practices. Embrace design best practices.