index.md

layout	id
default	home

<img class="hero-logo" src="/assets/img/logo.png" width="250" height="250">

<h1>MaintainableCSS</h1>
<p>Write CSS without worrying that overzealous, pre-existing styles will cause problems. <em>MaintainableCSS</em> is an approach to writing <em>modular</em>, <em>scalable</em> and of course, <em>maintainable</em> CSS.</p>
<a class="hero-button" href="/chapters/introduction/">Read now</a>

Benefits of MaintainableCSS

Modular and encapsulated

Styles don't bleed or cascade without your permission.

Any design requirements

Completely flexible to your needs.

No tooling required

But you can use tooling if you want to.

Easy to learn

Read the guides and see.

Any size project

Whatever size project you have, MaintainableCSS will help.

Upgrade in your own time

You can start applying the approach today, bit by bit. You don't need to upgrade the whole project in one go.

No problems of specificity

Avoid problems of specificity and override hell. Write CSS as if you always have a blank canvas.

Managing state is easy

Change the look and feel based on states such as loading, disabled and hiding.

No worry of regression

When you change existing styles, have no fear that you might have caused regression elsewhere.

Any team size

Useful in a team of one or in a team of 100.

Semantic HTML and CSS

MaintainableCSS embraces semantic HTML and CSS, so you get all the benefits too.

High performance CSS

Flat and performant selectors by convention.

Find redundant code easily

It's easy to spot redundant code. Find it. Delete it.

AB testing and easy upgrading

Want to test module variants against each other? MaintainableCSS makes this easy.

Read now

What others say

“A handy little read on learning how to write modular and maintainable CSS.”
— Smashing Magazine

“Finally a good book on how to write maintainable CSS.”
— Alexander Dajani

“I actually love everything about this.”
— Simon Taggart

“Totally agree with this approach to CSS.”
— Marcel Reyna

{% include chapterList.html %}