4 ms·

I really liked this summary, and I recall having gone through some of these stages myself. Discovering BEM and ITCSS made my life a lot better. Even when buildi

• onion2k 9y ago
  I quite like BEM (and SUIT, and OOCSS), but every single naming scheme is hard to enforce when it's just a 'process you must follow' type of system. There's nothing about BEM that stops me adding a .homepage__contactform-name style to a list item on the news page (apart from my colleagues rejecting the pull request or something). Consequently it's far too easy to use BEM very poorly especially when you're working under pressure. Stylelint and PostCSS have postcss-bem-linter, but that just checks the name is in a BEM style rather than testing that the style is being applied to the right element. Linting style names is definitely better than nothing, but really I want some way to tie class names to elements that's both easy to use when I'm writing code, and straightforward to ensure my class names actually match what ends up in the browser.
  • Hedja 9y ago
    You can do this with CSS Modules using BEM Classnames and a function to generate BEM classnames given a Component Name and State/Props. The function can then pick the generated classes out of the CSS Module's JSON import. If the classname doesn't exist, it can warn to the console. It's farely straight forward in React. You just need to make sure you always use the function to provide values to the className prop instead of manual strings.