Something I don’t like is a pre-concept about some technology before I try it. For a couple of months, I’ve been trying Stylus and I have to say I’m liking a lot. One type of CSS architecture I really like is BEM and these days I faced a simple problem that probably most of you resolved but as it was new for me I decided to post here.
The scenario with BEM
Imagine there is a superclass
.fabeni and it has a child element and a modificator class (if you want to know more about BEM, I wrote some stuff some time ago ). Something like that:
Here’s the thing: let’s say we want to target the child element of the modificator class, something like:
Using Stylus, I realized three different ways we could write it (probably there is more).
Rewriting the parent class
I have to confess that I’ve already done that. It’s ok! It’s not so beautiful but it works.
Holding the main class in a variable
Using this preprocessor feature, easily we could reuse the class.
Targeting dynamically the parent class
And booom! It’s possible to target the parent class using the magic
I don’t know exactly which Stylus’ version supports it, but it’s a good homework (I tested directly on the Stylus website).