A white boat in the sea.

Target a parent CSS class with Stylus

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 ^[0].

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

See all posts...