Posts tagged with workflow

Hey Bob! Your css rules break my components!

For many years, we are facing the lack of local scope in CSS, conflict happens everyday and we have to give every component a specific name like this-is-my-component.


css-modules is a great workaround to this problem. By sharing transformed class names between JavaScript and CSS files, we no longer worry about the global css - all class names are scoped locally!

css-modules output

The Problem

However, happiness comes with tears. As scoped css rules are tightly bound with js files, when you are trying to write a reusable component, you're possibly getting a headache: how can other developers override the default styles in my components?

We have no idea about the generated class names from outside, one thing we can do is to add some attributes onto elements so that developers can use attribute selector [attr]:

attr selector in react-toolbox

Hmm...I'd rather writing class names for every component.

Another solution is to expose an API that extends class names inside you components:

classname api

Does it mean that I may have to pass several class names in order to customize a complex component?

So, what if we could also import class name maps into sass/less/stylus ?