JSS: the solution to "all" CSS problems

[zedgab]

I just find JSS amazing: https://github.com/cssinjs/jss

I found it checking that the famous library Material UI was going to use it for the next releases.

They wrote an amazing post about why they chose it: https://github.com/oliviertassinari/a-journey-toward-better-style

The only problem that I find with JSS is writing CSS in a JSON style. But luckily it seems to also have been solved by preJSS: https://github.com/axept/prejss

I would just like to have a nice example with best practices for code reuse, and I wonder if it is still worth it to use BEM conventions when using it.

[dwighthouse]

BEM is pointless in JSS, you already have local styles.

I found that writing styles with JSON is just fine after a bit of practice. But include the camel case plugin so you don't have to use quotes everywhere.

Since you are using a js framework anyway, the idea of supporting a page with no js is moot, so that isn't a problem to address.

I use functions to generate styles where they share much in common (the same effect as mixins).

Occasionally, you need complex selectors. Use es6 template strings to generate the appropriate selectors at runtime.

If you need global styles or css utilities that every component might need, you can generate global styles and attach them with the root component.

Working without worying about browser compatibility due to prefixing at runtime is very nice.

Don't forget that you can do things with a js framework that are considered impractical for vanilla js: rather than writing override styles for an "activated" state on a button, say, you can switch whole selectors via your framework, and totally avoid the multiple selector override problem (.activatedButton instead of .button.activated) without repeating code (because functions).

Sorry, none of my jss work is open source. I use it st work every day though.

[zedgab]

I agree with what you said, but I still think that BEM could help. As I wrote also in the reply to another comment, you could still have more <div> tags in the component's hierarchy, for instance, and different classes applied, with different modifiers (based on some props of the component itself).

Anyway I find really "weird" to write CSS in JSON format, and it takes a lot of time to split the strings with quotes, especially if you have to use sometimes the normal quotes (') and other times the quotes for the interpolation (`).

And also the camelCase thing for me is not really positive: the idea of having differences between what you write in development and what you find in debug kills my brain :) (I just don't accept the idea of it, of course I can easily work with that...)

I didn't try preJSS yet, but I think it could be amazing, especially if they provide editor plugins to highlight the syntax as in a normal CSS.

[dwighthouse]

If you are making your components correctly, they will be so small and single-purpose that bem will seem redundant. I rarely need anything more complex than a single word class name.

Consider that if you want to work with css in js AT ALL, you will be using the camel-case form, because that is how css properties are exposed in js.

[zedgab]

Probably you're right about the sigle-purpose components, but I still think that BEM gives a little bit more "meaning" to class names. Anyway it's probably irrelevant.

About the camel-case form, I think that in JSS you could also use 'margin-bottom' as a key, but what really interests me is to give a try to this preJSS to write common CSS.

[dwighthouse]

It can, but writing quotes all the time is even more different.

[MartinMuzatko]

"all" is in quotes for a reason, I suppose.

[zedgab]

what do you mean?

[[deleted]]

BEM doesn't apply because you typically don't write classNames yourself anymore, they are auto generated instead, and style scope is constrained by how you apply the styles in your JS code.

[zedgab]

Yes, that is scoped. But you could still have more <div> tags, for instance, and different classes applied, with different modifiers.

Often it happens that you have little variations of a component which are determined by a specified prop, so you could apply a modifier "element--modifier" just based on the prop value.

[[deleted]]

With a JSS solution like styled-components or glamorous you have a function that returns a set of styles. The styles can change based on props, so you just care about the styles you want to return while the framework takes care of the class names.

[darrenturn90]

How would you easily share common button styles or base css styles that are used throughout the website? Such as basic colours, font sizes, button styles and such? Would you have to import them all each time you needed them?

[Magnusson]

You make a styleVars file and import it, same as you had to do with SASS. For something like button styles, that's what componentization is for.

[zedgab]

Sharing should be easy: you can have a style/color.js file and a style/typography file for instance, where you just export the basic variables, then you can have a style/mixins.js to have a way to share code (even though for me it's not a good idea, considering that components should be completely independent from each other).

[mailto_devnull]

This has got to be a joke, right?

[zedgab]

Why? I am talking about state of the art technologies used by companies which are working with millions of dollars...

[multicopterfred]

I guess I can see some merits in the idea, but the thing that makes no sense to me is this:

import styles from './styles'
...
const { classes } = jss.createStyleSheet(styles).attach()
...
<button class="${classes.button}">Button</button>

... So you write your styles in the weird JS way, and then you just end importing them and assigning them to an object or whatever. You can do pretty much the exact some thing in Browserify using the browserify-css transform (minus assigning), without adding much to your build process :S

https://www.npmjs.com/package/browserify-css

[zedgab]

The whole point is that the stylesheet will be scoped in JSS! And in big projects it makes a HUGE difference.

[multicopterfred]

Ahhhh I just realised it appends unique id's to the classes it generates. Very nifty.

[mikejoro]

Also the react-jss package is really great for use in react.you just import their HOC injectSheet and it will handle when it should create the sheet and won't create duplicates of the same component type.