Drupal Theming with Modular CSS

CSS Is Hard

CSS is difficult to scale on large sites and maintained by large teams.

Repetition

Floats, font-size references, heading levels, padding, margins...

Unmanageable

It quickly becomes a mess. !important

Weight War

You overwrite selectors with new selectors and then add more selectors to overwrite the ones you just created...

Coupling

Your CSS becomes tied to HTML and its location in the layout.

.sidebar-first .info h2 {/* Some Styles */}

Drupal CSS Sucks

Things got better with D7 but it still pretty much sucks.

SMACSS to the Rescue!

Use photo.

What is SMACSS?

Scalable Modular Architecture for CSS

What is SMACSS?

Created by Jonathan Snook in 2011.

What is SMACSS?

What's the Connection with Drupal?

It's being used as D8's CSS architecture and is already being used in Zen 7.5.2.

Categories

SMACSS separates CSS into the following categories:

• Base rules
• Layout rules
• Module (and sub-module) rules
• State rules
• Theme rules

Base

Base rules are the defaults. They are almost exclusively single element selectors. Best to just use Nicholas Gallagher's normalize.css reset.

html {
    font-family: sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
}

Layout

Layout rules divide the page into sections. Layouts hold one or more modules together. You can use frameworks like Zen-Grids or 960 Grid.

.container_12 .grid_3,
.container_16 .grid_4 {
  width: 220px;
}

.container_12 .grid_6,
.container_16 .grid_8 {
  width: 460px;
}

.container_12 .grid_9,
.container_16 .grid_12 {
  width: 700px;
}

Modules

Modules are the reusable, modular UI parts of the design, including callouts, sidebar sections, product lists, carousels, etc. Includes sub-modules that extend parent modules.

.newsbox {/* Styles */}

.newsbox--feature {/* Styles */}

.newsbox--body {/* Styles */}

States

State rules are ways to describe how our modules or layouts will look when in a particular state. Hidden? Expanded?

xxx

Themes

Theme rules describe how the layout or modules might look.

xxx

Naming Conventions

Avoid IDs

Use classes rather than IDs for styling purposes. Using classes reduces specifity issues.

Semantic

Class names should be meaningful and based on purpose and design.

Patterns

Naming convention should follow predictable and understandable patterns.

Decouple HTML/CSS

Decouple

Use additional class names and child selectors.

.box { }
.box h2 { }

<div class="box">
	<h2>Heading</h2>
	<p>Lorem ipsum dolor</p>
</div>

Problem

.box { }
.box h2 { }
.box h3 { }
.box h4 { }
.box h5 { }
.box h6 { }

Use a Class

Better to decouple CSS and HTML by applying a class to the H2.

<div class="box">
	<h2 class="box-heading">Heading</h2>
	<p>Lorem ipsum dolor</p>
</div>

SMACSS Modules

Keep Modules Simple

Base module should be defined as simply as possible to maintain flexibility.

Don't Undo Styles

Avoid writing rules to undo previous rules.

/* default style */
h2 {
	font-size: 1.5em;
	margin-bottom: 1em;
}

/* only when border needed */
.headline {
	padding-bottom: 1em;
	border-bottom: 1px solid #CCC;
}

Extend but Don't Modify

Base modules can be extended using sub-modules. Never modify the base module.