-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Question] how are CSS rules ordered? #473
Comments
by looking at the attribute, class="css-columnCenter-1sfk9u6 css-styleCard-5bid07" it seems there's no order in those styles, just the later one overwrites the former one, which is not how hashmap merging works, just how class names works. well... more... https://stackoverflow.com/questions/1321692/how-to-specify-the-order-of-css-classes |
Composition/style merging is not supported with |
what's the suggested way of deploying projects with emotion? if not `extractStatic. |
I'm not sure I understand the question. Disable |
People prefers to extract CSS into standalone files, then CSS can be loaded separately, no need to wait for all js download. It means page loads faster visually. I'm not convinced it's best choice to keep CSS in JS currently, although an option... Does emotion recommend people keeping CSS in JS, in production? |
Yes I would always recommend using the tools provided in |
Never heard of |
I haven't, but you can find the docs here https://github.com/emotion-js/emotion/blob/master/docs/ssr.md |
Suddenly realized that I wasn't looking for server side rendering. Our app is a single page app that runs on client side. I want CSS to load fast. And I thought parsing CSS file is theoretically faster than creating style elements. |
https://codesandbox.io/s/rm44vm2j3p If you are using React, the styles are created the instant the component is rendered. I would put global styles and your reset in regular css files and then use css-in-js for your components. The real difference comes from parsing js vs parsing css files. |
That's nice. I would rely those arguments to convince my colleagues. The results look not stable, number vary. I can't tell it's very fast, just not slow... |
I have two variables in my code:
styleCard
is supposed to overwrite the previous one, which specifiesjustify-content: center;
/However, as I run the code through Webpack and extracted CSS out, I found it not working as supposed:
styleCard
appears in line2935
, which is beforecolumnCenter
in 3013... as a result,justify-content
did not change.How do you ensure orders of rules in emotion?
The text was updated successfully, but these errors were encountered: