Hacker News new | past | comments | ask | show | jobs | submit login

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.




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 {...".


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


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$";
    }


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




Join us for AI Startup School this June 16-17 in San Francisco!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: