Stylesheets best practice with Meteor

Hi guys

I wonder what the best practices if there is concerning stylesheets in Meteor. I’m using Meteor 1.4 / React, and I’m placing my stylesheets in /client/stylesheets.

I would like to know if it’s better to place it in /imports/client/stylesheets or directly close to it’s component like task.js / task.css or do a folder like I do for the moment

/stylesheets/app.css
/stylesheets/components/{componentName}.css
etc …
Is there a best practice somewhere and also, how to import it good (import the app.css in the main.js ? / import app.css + component.css in each component etc …)

Thanks

We use Semantic-UI’s React components in our project, so CSS mods are usually made as custom overrides to our theme per Semantic-UI’s methodology. However for custom components we’ll include a css sidecar file as you can see here with a TweetEmbed component.

Meteor builds the LESS for the app, but we use Webpack to build the LESS for Storybook so we can develop our components using Storybook without running our app.

You may find this helpful

2 Likes

Oh yes, I have seen this too: https://github.com/cssinjs/react-jss… seems pretty cool.
Do you know the performances differences with inline css and just normal ones or with stylus/sass/less etc … ?

Thanks @maxhodges. Yes I used React-Bootstrap, kind of the same thing, but theses librairies seems to be less accessible than the raw semantic/bootstrap and probably less usable in business project :confused: But I like using theses. So you have a css per class if you need to extend semantic with additional custom css ? No main file ?

Hi, sorry but I’m having a hard time parsing this

Yes I used React-Bootstrap, kind of the same thing, but theses librairies seems to be less accessible than the raw semantic/bootstrap and probably less usable in business project

Which libraries? how less accessible? We used both bootstrap and semantic-ui for business apps

so you have a css per class if you need to extend semantic with additional custom css ? No main file ?

I don’t really follow “a css per class”? a “class” is a component?

Meteor merges it all down into one main file, but, no, in our project we have many CSS files i.e. Semantic-UI CSS for components and default theme, and overrides for customized components, our own custom theme and page overrides. Then there are CSS files for vendor supplied and custom React components.

We used bootstrap for a few projects, but now we’re doing all new dev with Semantic-UI. It’s a bit of a learning curve to understand their inheritance scheme, but overall we feel it has a more modern look and is pretty well thought out. The Semantic-UI-React components came along just in time! We are launching a new site built with them later this week.