On our project in EPAM, we’re currently busy with integrating React stack into our infrastructure. Had an interesting discussion about CSS Modules today: should we use composes in our code?
Several interesting points:
- composes is an official way to compose classes, however, it breaks compatibility with the real CSS. If we use composes, it’d be hard to migrate from CSS Modules to something else in the future.
- Shadow DOM is cool and should be released in the major browsers pretty soon. A colleague believes once Shadow DOM becomes widely available, CSS Modules will get much less popular pretty soon. A major advantage of Modules is the incapsulation of styles, and Shadow DOM does this natively. Therefore, using CSS Modules in a long-term project is probably a bad idea.
- There’s no official documentation on why composes was chosen over the traditional way of combining several classes, like <button class=”button button-green”>. Probably I haven’t found it. I believe composes exists because it is cleaner than combining several classes:
<!-- With composes --> <button className={styles.buttonGreen}> <!-- Without composes --> <button className={styles.button + ' ' + styles.buttonGreen}>but the real decision is still unclear.
(Originally published on Tumblr.)