Target a parent CSS class with Stylus

Something I don’t like is a pre-concept about some technology before I try it. I’ve been trying Stylus for a couple of months, and I have to say I liked it 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 were able to solve, but as it was new for me, I decided to post here.

The scenario with BEM

Imagine there is a superclass .fabeni. 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, we could easily reuse the class.

Targeting the parent class dynamically

And boom! It’s possible to target the parent class using magic. ^[0].

I don’t know exactly which Stylus version supports it, but it’s good homework (I tested directly on the Stylus website).