Back to the CSS

Maxime explains the need for CSS preprocessors in large frontend projects and introduces cssnext, a project that allows us to use CSS specs not yet implemented in popular browsers.

I’m sure most of you here love CSS, like I do, but I’m also sure one day, you have been frustrated because you don’t have variables, you don’t have math, you cannot customise colors and stuff... Because it’s not a programming language and we are still looking sometimes for some similar features that you find in this kind of languages.

We use CSS preprocessors to stop being frustrated. And with preprocessors, we have some new features (@include, @extend and this kind of stuff).

But our website is getting bigger and bigger. The codebase is more complex and we are starting to have a new problem (which is not about the language itself).

It’s about the organisation. What should we do?

There is a lot of people right now that have worked to make new methodologies. For my concern, I was happy with BEM, which helps me a lot to avoid deprecated @include, @extend features, because I found this is not CSS & this can make some crappy code.

Meanwhile the W3C have worked on a lot of stuff, like custom properties. We have variables right now, already available in Firefox. We can make some math too. We will have custom media queries (soon in Internet Explorer). We will have a lot of color manipulations possible with mainly the new function color() which allows you to modify and use a lot of modifiers like lightness, alpha, tint, saturation, whiteness, blackness and... (there is too much for my brain so I cannot tell you everything).

There is more, there will always be more selectors (like :matches(), :has()…). There are new functions (like color()). You will have soon nesting available.

So maybe we can say that we can go back to CSS! It will be doable and that’s why I’ve worked on a project called cssnext. cssnext is just css specs. You can use (with some limitations, for now only one - that does not frustrate me) css specifications right now!

You can check the website: cssnext.github.io. You will find some links about the new specifications. There is a lot of plugins (for you workflow): grunt, gulp, brunch, broccoli, duojs and it’s even in Prepros 5 already.

So give it a try. Thanks!