Expressive CSS

Principles

Classes Are For Visual Styling

Do classes need to be ‘semantic’?

Browsers do not care what your classes are named. People who visit your site do not care what your classes are named.

The people who do care are those who will inherit your code. Consider how quickly an author can understand your front end codebase.

Utility/Helper classes are widely used.

Expressive CSS takes the idea of Utility/Helper classes that are already widely used in many popular front end frameworks, and encourages you to take it further.

Utility classes are commonly and extensively used by many popular front end libararies.

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.hidden {
  display: none !important;
  visibility: hidden;
}

Build on a Good Foundation

Start with smart defaults

Go beyond applying a reset to normalize the default element styles. Elements without any class styling should have a look and feel.

Keep an eye on your base element styling with a test page.

Stay DRY With Utility Classes

How long does it take before the different classes you make for widgets, blocks, modules, menus, modals, forms and components start to become unmaintainable? Writing CSS for all of these can lead to a stylesheet overloaded with declarations of font-size, padding, margin and more.

How many CSS declarations are in your stylesheets for...

Avoid defining the same styles over and over again. In most cases, use a utility class to avoid multiple declarations of the same styling property, especially for common properties like padding/margin, typography, colors, alignment and container styles. This is the key to unlocking the benefits of Expressive CSS.

A trade-off. You will have more classes in HTML. However, this will result in smaller stylesheets, especially as your codebase grows. By making extensive use of utility classes, you can avoid nesting and overrides which will reduce the complexity of your CSS architecture.

Strive For At-A-Glance Understandability

Consider the view sourceror.

When naming classes, consider those viewing your markup for the first time. With Expressive CSS, they should be able to get some sense of layout from the markup alone, without the need to even open a browser. This enables them to understand the element styles quickly and work faster.

Given the markup below, which div can you better guess what it might look like?

<div class="inner">
<div class="border pad-1">

Avoid overly abbreviated class names. Hyphens help the eye when scanning markup.

.fr           // too abbreviated 
.floatr       // better, but..
.float-right  // this is more readable..
.float-r      // or abbreviate a little if you prefer

Component class names should be clear and easily understood. Avoid names that are mysterious.

Breakpoint Prefixing For Quick, Easy Responsive Layouts

Build responsive layouts quickly by prefixing them inside of media queries across common breakpoints. Many grid systems and front end frameworks already use this technique.

Create breakpoint prefixes for any properties that you want to change based on screen size.

.s-hidden       // hide when on small screen
.s-text-right   // align right on small screen    
.l-hidden       // hide when on large screen
.l-text-large   // large text when on large screen

Benefits

Smaller Simpler CSS

Too Much C in CSS

Every time you write a style declaration, you are creating an exception to a default behavior.

Lightweight Simple Scalable Portable

By restricting the style declarations of related properties to one area of your stylesheet, you not only reduce the size of your CSS, you create a unified visual style for your site that is easy to maintain and to change.

Easy Refactoring and Experimentation

Apply styles like an artist paints on a canvas

Let’s make the link at the bottom of that widget aligned right instead of aligned center. Instead of having to hunt for the line of css that controls alignment in devtools, then drilling into the css and editing, all you need to do is change class="text-center" to class="text-right".

Write Less CSS

As you build up a system of utility classes, the number of times you need to author new styles will greatly decrease.