4 ms·

Not to be rude, but I fail to see what the use case is for this. You can already use CSS in React and a component is often CSS, JS and JSX. What's the win here?

• MunGell 9y ago
  Hi @devdad, Thanks for your feedback! I guess you mean CSS-in-JS approaches where CSS is either put inside JS code as a template literals/string (styled-components, csjs etc) or as inline styles with JS objects (Radium etc.). Both approaches have their own advantages and disadvantages. It could be only me, but I personally don't like the idea of having inline styles, although I realise it could be the only way to make styles cross-platform. The string approach works well and has additional advantage of dynamic property values (in case of template literals). However, (and this is IMHO again), I can't say this is the most readable way to structure code, especially if you rely on IDE/text editor identifying this code as CSS. There is a third approach, which is basically putting <style> tag right in JSX component, but this then gets repeated with every component you put on the page. Thus, I wouldn't consider this as an approach at all. Let me know if I missed anything above. My initial intention was to create a way to get styling and JS/JSX code together in one file in a way that would keep code readable and reusable. This experiment does not tick all the boxes for the cross-platform, easy to write and read reusable way of combining styles and JS code in one file. However, the concept could be convenient in some cases where cross-platform-ness is not a requirement and styles are already written in CSS. As I mentioned, one-loader was inspired by vue-loader, which I found convenient for the purpose of storing css and js code in one file. Hope that makes sense
  • akawry 9y ago
    What about just importing the css file from your component file? For example, in MyComponent.js, you have: import './MyComponent.css'; const MyComponent = () => ( <div className="my-class">I'm a component!</div> ); and in MyComponent.css, .my-class { color: red; } To handle proper scoping, you could use something like css-modules or wrap each component in a top-level <div> with a component-specific class name. For example: const MyComponent = () => ( <div className="MyComponent"> <div className="content"> I'm a component </div> </div> ); and then .MyComponent.content { color: red; } If you use a preprocessor like sass, you can just nest your entire component-specific styles like this: .MyComponent .content color: red .footer color: blue
    • MunGell 9y ago
      I use this approach in most cases combining it with BEM class naming. However, the point of having single-file components it to have all the required code in one file, including CSS/styling.
• dahart 9y ago
  Last time I checked, CSS-in-React didn't have 100% CSS coverage, there were some things you still have to do natively. Has that been fixed recently? CSS-in-React is sometimes pretty useful, but personally I'm not in love with it... because the attribute names are camel-cased, and you're running JS code to set styles that the browser already has a mechanism for that doesn't need to run code.
  • allover 9y ago
    Several CSS-in-JS libs support all of CSS, and allow you to write actual CSS and not camelCase styles. styled-components [1] is prob the most popular example. Your complaint they are evaluating JS just to set styles is valid, tho some libs, like emotion [2] support static CSS extraction. [1] https://www.styled-components.com/docs/api#supported-css https://www.styled-components.com/docs/api#supported-css [2] https://github.com/emotion-js/emotion https://github.com/emotion-js/emotion