Introduction

C3 (Component, Child, Context) is a methodology for writing CSS, centred around a selector naming convention. This approach is intended for anyone who wants to write code which is semantic, easy to maintain, and scalable. If you are familiar with BEM, you will be familiar with two thirds of C3. Either way, you should find all the information you need in this guide.

Semantic

In CSS terms, semantic has come to mean selectors with names that convey what an element represents; and not what the element looks like. Essentially following the W3C guideline:

[…] authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

C3 is very much geared towards semantic CSS selectors. If this is something that’s important to you, C3 should feel like a natural fit.

Maintainable

C3 helps make code easy for humans to understand and navigate. Components are easy to identify, both in the HTML and CSS. All the styles for a given component are located in one place.

Scalable

C3 is designed to facilitate isolation of styles, and minimise inheritance. This means that as your code grows, complexity doesn’t have to. Adding or removing components needn’t be scary.