On: CSS Modules

[egze]

The advantage of BEM naming is that it takes 0 effort to find your style definitions in code.

.Button--disabled copied in the browser, will find exactly 1 definition in the project. .components_submit_button__normal__abc5436 will not find you anything.

[dantillberg → egze]

But on the flipside, in the latter case, you don't even need to grep for it -- "components_submit_button__normal__abc5436" reads as "components_{filename}_{classname}...", so you know right away to go look in "submit_button.(css|less|etc)" for ".normal {...".

[egze → dantillberg]

This is certainly a less convenient approach. You always need to parse the class name in your head to open the correct file.

[lojack → egze]

As a counter argument, when grepping files you still need to parse the output in order to open the correct file.

And, yes I understand that you can have grep output a path name and pass that directly in as an argument to your text editor. Similarly, it'd be relatively trivial to write a bash function that'd parse the class name and find the correct file to open.

Something like:

    function lookupcss() {
        find . | grep $(expr "$1" : '\(.*\)__.*' | sed 's/_/.*/g')".*\.css$";
    }

[arxpoetica → egze]

THIS. Living in a world of abnormally gross class names like `components_submit_button__normal__abc5436` sounds downright painful, UGH.