Manage large-scale web projects with new CSS architecture ITCSS

CSS architecture are in vogue right now. It's something you've no doubt heard mentioned numerous times over the past year or so, and with good reason: UIs (and the teams that build them) are getting bigger and more complicated than ever before.

There are a number of aspects of CSS which make it troublesome too.

It's declarative, meaning there is no logic or control flow to tell other developers much about the state or construction of the project. It operates in a global namespace, meaning we get collisions, leaking styles and inadvertent regressions.

It utilises inheritance, making everything somewhat interdependent and brittle. Finally, the unavoidable specificity model can cause problems when selectors fight each other for prominence.

These are all problems in and of themselves, but when working at any reasonable scale they either become directly more apparent, or the odds of encountering such problems are statistically much higher.

Enter a CSS architecture: a way of planning and structuring your CSS for large and long-running projects.

Introducing ITCSS

ITCSS – ‘Inverted Triangle CSS' is a new methodology. It involves visualising your entire CSS project as a layered, upside-down triangle. This hierarchical shape represents a model that will help you order your CSS in the most effective, least wasteful way.

• Harry Roberts has written an exclusive six page introduction to ITCSS for the new issue of net magazine.

We chat with Harry Roberts - the creator of ITCSS.

Why don't you introduce yourself?

Hey! I'm Harry. I'm a Consultant Front-end Architect from the UK. It's my job to travel around from client to client helping them and their teams better understand and manage everything from the design process to CSS Architecture to performance.

I've been fortunate enough to do this for people like Google, Kickstarter, and the BBC, among others. I have the best job in the world.

And ITCSS. What is it?

ITCSS—which stands for Inverted Triangle CSS—is a fully managed CSS architecture. It's not a framework or library; there's nothing to download or install.

It's a collection of principles and metrics by which developers should group and order their CSS in order to keep it scalable, terse, logical, and manageable.

It's very specifically opinionated in that it gives definite rules and guidelines for your source order and groupings, but it leaves decisions about naming conventions and preprocessors etc. up to you. This means that, although ideally suited to larger projects, ITCSS can be used on builds of all shapes and sizes.

How would you describe the ITCSS philosophy?

The ITCSS philosophy is a simple one at its core. Basically that we should order CSS by metrics defined by the language (and its features) than by the usual standard of human-oriented patterns.

ITCSS takes CSS and writes it in a way that browsers and the design of the language can best utilise, which gives us far better scalability and maintainability than we'd get if we were to write CSS around how a person thinks.

That said, the move to ITCSS (both conceptually and in practice) is not a huge shock to the system as you might imagine; it basically just rewires a couple of fundamentals and then it's business as usual.

Why did you create it?

I started working in product teams back in 2011, when there wasn't a whole lot of writing and research around CSS at that scale. I was thrown into an environment where I was the only front-end developer in an engineering team of dozes, working on large codebases that we to be around for years to come.

I started doing research and writing around product-scale CSS because I was beginning to solve a lot of problems first hand. One of the key things I began looking to solve was complete architectures (rather than, say, naming conventions), which is why ITCSS was born.

It was vital that I create a system which was approachable, predictable, guessable, rule based, prone to smaller file sizes, and geared toward scalability and growth.

Other the past four years this work as been gradually honed to officially become ITCSS.

Next page: how ITCSS works and when a developer should consider calling on it...