score:0

I'll go with the first proposition. (the result is quiet the same)

  • both proposition have quiet the same result
  • If someday you have to edit your Menu css, you'll just have to edit your Menu css and not your component.
  • You let CSSModules take decisions. (more futur proof?)

score:0

You could import the css files that you use frequently into a broader CSS file that you import on specific pages, this is taking the second approach but making it cleaner, especially if you have a lot of common core css files that you import on pretty much all pages.

score:0

I would advise you to go with [Sass] [1]. Sass allows for the usage of partials (i.e. distributed / scoped css sheets).

You write scoped (to the components you want) css and import all your partials into your main.css then.

Couple of other advantages:

  1. you can do theming by having one partial that defines your them via variables, which you import first and then all your partials can use these variables.
  2. having the css on a scoped level (at least to me) felt more "reactish" where components are supposed to be stand alone, but it also wasn't inline styling, which I find ugly and weird (I don't like to clutter down my .js files with styles)

[1] http://sass-lang.com/

score:0

  1. You should take a look at the option by vue.js component (scoped/overall)

  2. You can choose a precompile css language like SASS, which can use @extend ...etc to reuse the common property, like below:

     %common {
       width: 100%;
       height: inherit;
     }
    
     .my-class {
       @extend %common;
     }
    

score:0

I find this one line very helpful with importing:

@import 'file.css';

score:0

You could set these as globals and update their names to be a tad more semantic, like BootStraps pull-right.

If you declare them as

:global(.right) {
    /* ... */
}

You can then just use them in your app by preferably importing globals early on in the entry point.

score:2

One approach is to collect all app level css variables and calculations at the top level into app.css

@import "./theme/layout.css";
@import "./theme/colors.css";
...

Then reference app.css using

@import "../../app.css";

This way you can manage @import scope inside one file at the root level.

score:5

I have manage to get this working:

// css file
@value class-to-compose from "file-where-class-is-defined.css";

.someclass {
  composes: class-to-compose;
  // other styles
}

Related Query

More Query from same tag