CSS Convention - Scoping vs BEM vs OOCSS vs SMACSS

[merlinstardust]

Does Mantra have a preferred CSS convention?

• BEM - Block Element Modifier
• SMACSS - Scalable and Modular Architecture for CSS
• OOCSS - Object Oriented CSS
• Scoping - I couldn't find an official name for this but I'm referring to using SASS / LESS scoping where you'd have .template-name { .li { /* css */ } }

[adamdawkins]

Not sure this feels like something Mantra should have an opinion on. With so many CSS Frameworks also used in UI development, it could be a bit hard to enforce.

+, for most intents and purposes, BEM, SMACSS and OOCSS are very much variants of the same school of CSS thought.

[arunoda]

Since the React community is going forward with CSS in JS, that's a kind of way we can go. We started with few projects with that and we are loving that.

Specially Radium allows us to do much better inline styling.

And I also like CSS frameworks which abstract the CPU via some React components. These are two such good projects:

• http://jxnblk.com/rebass/
• http://www.material-ui.com/#/

[arunoda]

I also agree with @adamdawkins that there are so many ways to deal with CSS and we can't enforce one such way.

[natecox]

I feel much the same way about this as I do about enforcing strict linting styles: people feel too strongly about the way CSS is structured, and it has little bearing on the functionality of the app, so I don't think we should try to impose a standard here. It's basically an invitation for evangelism and arguments.

[merlinstardust]

There's definitely a lot of CSS methodologies out there just like there are lots of style recommendations for JavaScript. But it seems that Mantra is going to recommend an eslint config so I think recommending a CSS methodology is within the scope of the spec.

I do think that CSS in JS does seem to be the way forward after seeing this slide deck.

[arunoda]

I wrote an article on this too: https://voice.kadira.io/state-of-react-and-css-501d179443d3#.jwxj8y2ee

[fermuch]

The best tool I found so far is JSS. Pure js, and compiles to CSS.

You create a javascript file which exports an object, and that object has all the style definitions (check out the playground). When you need those styles, you can simply import them (since they're JS files), and use jss.createStyleSheet to compile the object to CSS.

It works well with mantra, since it doesn't need external compilers, and everything is self-contained. You can even write the definitions inside the component itself, and you don't have global style definitions, so everything is self contained in the component.

[v-anyukov]

@fermuch Hi! Did you try this https://github.com/jsstyles/react-jss? Cant make it work properly with mantra =(

[fermuch]

@v-anyukov take a look at this link.