BEM is an approach to writing styles by using class names for most of your selectors and adhering to a specific naming convention.

CSS Modules are closer to the idea of 'uniquely styled elements', where you are still writing CSS with whatever selectors you like, but as each element gets output as HTML (whether server-side or client-side) you are marking up that element with a unique identifier, then figuring out all of the CSS that should apply to this particular element and outputting the styles required for each instance of each element the styles apply to using their unique identifiers.

BEM could be a way that you organize your CSS whether you are building things in a modular way or not, where the idea of CSS modules is to ensure that you can build modular components that can:

• exist in multiple instances on the same page without conflict
• be imported into any new codebase and be guaranteed not to have naming conflicts with existing selectors

Hopefully that explains the difference. I'm pretty sure you could use CSS Modules for modular 'scoped' styles whether you were using BEM for your organization or not :D

To me much like CSS preprocessing, CSS "modules" is some of the most mind-numbingly idiotic halfwit BULL we've seen as a development practice. The JOB of HTML is to say what things are, NOT what you want them to look like. That's why OOCSS is a bunch of asshat bull and why frameworks like bootcrap are some of the most dumbass ignorant nonsense conceivable since they rely on presentational classes.

... as if it's not bad enough to be crapping markup into a page innerHTML style instead of using the DOM, whilst ALSO pissing on accessibility by using Scripttardery to build the page, no... they have to flat out take a giant steaming dump on HTML with garbage like this:

element.innerHTML = '<div class="${buttons.red} ${padding.large}">';

Defeating separation of concerns, separation of presentation from content, progressive enhancement, and every other cornerstone of accessible development using web technologies. If you don't know what's wrong with saying something like class="bigText Red centered" you have ZERO damned clue how to use HTML properly or why HTML and CSS are separate, and probably aren't qualified to even be writing websites in the first place.

"CSS Modules" just takes this presentational use of classes and throws JavaScript at the same incompetent idiocy.

It ranks up there with the mouth-breathers telling people to throw classes at EVERYTHING instead of leveraging selectors. 100% grade A farm fresh manure by people just determined to stuff as much herp into that derp as possible.

I have ZERO kind words for the CONCEPT. It was clearly created by people who simply do not grasp the most basic concepts of HTML or CSS... or why specifications like 4 Strict did away with certain tags and attributes since for all intents and purposes that's EXACTLY what they are trying to recreate: HTML 3.2 and the browser proprietary trash that wormed its way into 4 Tranny. You might as well go back to using <font>, <center>, and the endless horde of presentational attributes we've spent the better part of two decades trying to break people of using!!!

Dimes to dollars these are the same types of mindless hapless helpless hopeless schmucks who either don't use the media attribute on <link> or don't see anything wrong with saying media="all". Since I'm so sure your screen media style makes perfect sense for print and aural.