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.
There is more, there will always be more selectors (like :matches(), :has()…). There are new functions (like color()). You will have soon nesting
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