Why I Write CSS in JavaScript
mxstbr.com
Why I Write CSS in JavaScript
1–10 of 255 posts
Re: Why I Write CSS in JavaScript
#2Author here, happy to respond to any questions. AMA!
Re: Why I Write CSS in JavaScript
#3Author here, happy to respond to any questions. AMA!
How do you plan to accommodate NoScript users?
Re: Why I Write CSS in JavaScript
#4Author here, happy to respond to any questions. AMA!
- Were there moments when you cried back SASS or vanilla CSS?
- In your react example, I see you created as styled.h1, but that's an awkward way of bootstrapping a component. Even if I used SC, I would still put the style information outside my component code in the same directory. At this point I don't see the benefit over doing something like:
import * from './login.scss';
Re: Why I Write CSS in JavaScript
#5Re: Why I Write CSS in JavaScript
#6Author here, happy to respond to any questions. AMA!
How do you plan to accommodate NoScript users?
During server-side rendering CSS-in-JS returns a tag with all the CSS inlined.
If you do not server-side render, it does not matter whether you put your CSS into JavaScript or not—your JavaScript app is not going to render anything anyway.
Re: Why I Write CSS in JavaScript
#7Author here, happy to respond to any questions. AMA!
How do you plan to accommodate NoScript users?
I know this will be unpopular, but after a certain point, noscript users just get a bad experience and that can't be helped. If a developer wants to provide a rich experience, then there will always be certain platform requirements. Without them, you will have a lacklustre experience. It's like saying "I want to have all the whizzy functionality of your app, but I want to access it using a standard, run of the mill, mud-laden potato" - it's just not going to be possible.
Re: Why I Write CSS in JavaScript
#8Author here, happy to respond to any questions. AMA!
- Were there moments when you cried back SASS or vanilla CSS? - In your react example, I see you created as styled.h1, but that's an awkward way of bootstrapping a component. Even if I used SC, I would still put the style information outside my component code in the same directory. At this point I don't see the benefit over doing something like: import * from './login.scss'; What can SC do that regular CSS or SASS ca…
The big win for me is if you're making an SPA, all the knowledge of the app state is already stored in JS (redux, or local state, or handed down as props if using React). So instead of toggling styles on a class, you just hand the state to the styled component, since it's just a function that returns css.
Re: Why I Write CSS in JavaScript
#9In my opinion this is a workaround for a language flaw in the React concept.
Look at this beauty for comparison: https://vuejs.org/v2/guide/single-file-components.html
Re: Why I Write CSS in JavaScript
#10Author here, happy to respond to any questions. AMA!
- Were there moments when you cried back SASS or vanilla CSS? - In your react example, I see you created as styled.h1, but that's an awkward way of bootstrapping a component. Even if I used SC, I would still put the style information outside my component code in the same directory. At this point I don't see the benefit over doing something like: import * from './login.scss'; What can SC do that regular CSS or SASS ca…
- No! I have not missed class name collisions and specificity wars at all, and I have enjoyed being able to dynamically adapt my styling as necessary.
- This ties into a broader point of having "style components" like and , which is a very nice way of working in React. styled-components (the library) simply takes that pattern and enforces it across your application. See style-components.com for links to some more resources about this pattern!