A new approach to our CSS

atomic-css.md

Atomic CSS

There are many different variations to 'Atomic' CSS. While we could consider the programmatic approach, it's not good for readablity (e.g. Pos(a) Bgc(brandColor) W(columnWidth) H(90px)).

I suggest the following approach because of its readability and scalablity:

1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

And Utilities.

Each of these can easily be summarised by the following diagram:

Atoms

A single item:

atoms/search-label/search-label.scss

.a-search-label {
	font-size: 12px;
}

atoms/search-input/search-input.scss

.a-search-input {
	padding: 10px;
}

atoms/search-button/search-button.scss

.a-search-button {
	text-decoration: none;
}

Molecules

A group of atoms bound together:

molecules/search-box/search-box.scss

.m-search-box {
	display: flex;
}

Organisms

A group of molecules combined together to form a distinct section of an interface:

organisms/site-header/site-header.scss

.o-site-header {
	display: grid;
	/* Could contain molecules such as .site-logo .navigation and .search-box */
}

Templates

Templates are groups of organisms stitched together:

templates/index/index.scss

.t-index {
	/* Could contain organisms such as .site-header .page-content and .site-footer */
}

Pages

Specific variations of template:

pages/gaming/gaming.scss

.p-gaming {
	/* Variations of the .t-index */
}

Utilities

Utilities should be:

• Easy to understand
• Execute a single function (e.g. .u-order-first)
• They should be immutable

Utilities can often be misused to serve more complicated purposes. (e.g. while an accordion may serve a single function it is both configurable and could be implemented differently depending on the use-case, therefore it should be a organism built of molecules which can be modified by a template.

JavaScript

JavaScript logic should never be assigned to any of the classes associated with styling. In most cases logic should be associated with data attributes, however in some scenarios a js- prefix can be applied to the class name.

Immutable CSS

Classes should never be modified, making them more dependable. This is essential to 'proper' atomic architecture. Without it you run the risk of something like:

.my-page--red-theme {
	.black {
		color: red;
	}
}

Reference

Atomic Web Design by Brad Frost

atomic-design.png