4 ms·

I just read (skimmed) through the source code of https://www.styled-components.com https://www.styled-components.com Holy shit there’s a lot of code there. Wha

I just read (skimmed) through the source code of https://www.styled-components.com https://www.styled-components.com Holy shit there’s a lot of code there. What is it all doing - can anyone summarize? As far as I can tell it’s main selling point is letting you use pure native CSS in reactjs. You can do that anyway in ordinary reactjs by writing: <style>’put your css here’</style> Put that straight into your react code and you can use any native CSS in ReactJS.

neoziro 8y ago
Styled Components is a CSS in JS library. It generates classes from your CSS and inject them into components. This is much more complicated than adding a `<style />` tag in your component!
- hguhghuff 8y ago
  Why is this better than a style tag? What’s the purpose/benefit of generating classes from CSS versus just using CSS? Couldn’t I just inject a CSS string into a component and put that string into a style tag?
  - neoziro 8y ago
    I will not explain all advantages of CSS in JS. You can find a lot of articles on the subject. An example https://hackernoon.com/all-you-need-to-know-about-css-in-js-984a72d48ebc https://hackernoon.com/all-you-need-to-know-about-css-in-js-...
    - hguhghuff 8y ago
      The core premise for CSS in JS is solved by backticked strings in style tags as shown above. The backticked string style tag shown above already solves all the issues with CSS limitations in reactjs. Here’s what the article you linked to says: “Why does this matter? Not all CSS features can be aliased with JavaScript event handlers , many pseudo selectors (like :disabled, :before, :nth-child) aren’t possible, styling the html and body tags isn’t supported etc. With CSS-in-JS, you have all the power of CSS at your fingertips. Since actual CSS is generated, you can use every media query and pseudo selector you can think of. Some libraries (like jss, styled-components) even add support for neat, non-CSS-native features like nesting!” All addressed by backticked strings in style tags.
      - Kiro 8y ago
        Your solution will pollute the CSS namespace.
        hguhghuff 8y ago
        Can you explain what it means to pollute the CSS namespace and why it matters? Are you sure you are correct or are you just guessing?
        tekkk 8y ago
        Just stop being so confrontational. Styled-components enable you to use SASS, not having have to invent any classNames or worry about them conflicting, enables you to easily extend those styles and gives you the ability to mix code with your styles in kinda effortless way. Okay granted that mixing code is not as clean as I'd like it to be but still I haven't found a better option
        Kiro 8y ago
        You name a class ".button" and it will conflict with completely unrelated component's style tags which also have a class named ".button". You don't have this problem with CSS-in-JS. You isolate the styles completely.
      - madeofpalk 8y ago
        The core premise for CSS in JS is to work around CSS's global namespace. It means you can write styles for a component using a 'local namespace' and have to worry a lot less about accidentally affecting the styles of other parts of your site. Every other language has scoping, so why can't CSS? This is especially helpful as your site and team scales - you don't need to worry as much about stepping on other people's toes, nor do you need to be as aware of the entire (styling) scope of your website. When you do share/cascade/compose/extend styles, it makes it a lot more explicit in the way you do it. It's basically taking a concept like BEM and baking it into the language, reducing the mental overhead.
madeofpalk 8y ago
If you can't understand what it's doing from the source code, maybe read the documentation? I'm not a huge fan of Styled Components, but it's a way to write properly encapsulated styles for just that moment - You write 'regular CSS' that's scoped to exactly that component, so it can't leak out and affect other parts of your site.
- hguhghuff 8y ago
  I read the source code because I was trying to see how a solved problem needed so much code to implement.
  - madeofpalk 8y ago
    I don't think Scoped CSS is a "solved problem". Well actually, I think CSS Modules solved it in the most "perfect" way, but I'm willing to believe that others have problems I haven't experienced before :)

neoziro 8y ago

Styled Components is a CSS in JS library. It generates classes from your CSS and inject them into components. This is much more complicated than adding a `<style />` tag in your component!

hguhghuff 8y ago
Why is this better than a style tag? What’s the purpose/benefit of generating classes from CSS versus just using CSS? Couldn’t I just inject a CSS string into a component and put that string into a style tag?
- neoziro 8y ago
  I will not explain all advantages of CSS in JS. You can find a lot of articles on the subject. An example https://hackernoon.com/all-you-need-to-know-about-css-in-js-984a72d48ebc https://hackernoon.com/all-you-need-to-know-about-css-in-js-...
  - hguhghuff 8y ago
    The core premise for CSS in JS is solved by backticked strings in style tags as shown above. The backticked string style tag shown above already solves all the issues with CSS limitations in reactjs. Here’s what the article you linked to says: “Why does this matter? Not all CSS features can be aliased with JavaScript event handlers , many pseudo selectors (like :disabled, :before, :nth-child) aren’t possible, styling the html and body tags isn’t supported etc. With CSS-in-JS, you have all the power of CSS at your fingertips. Since actual CSS is generated, you can use every media query and pseudo selector you can think of. Some libraries (like jss, styled-components) even add support for neat, non-CSS-native features like nesting!” All addressed by backticked strings in style tags.
    - Kiro 8y ago
      Your solution will pollute the CSS namespace.
      - hguhghuff 8y ago
        Can you explain what it means to pollute the CSS namespace and why it matters? Are you sure you are correct or are you just guessing?
        tekkk 8y ago
        Just stop being so confrontational. Styled-components enable you to use SASS, not having have to invent any classNames or worry about them conflicting, enables you to easily extend those styles and gives you the ability to mix code with your styles in kinda effortless way. Okay granted that mixing code is not as clean as I'd like it to be but still I haven't found a better option
        Kiro 8y ago
        You name a class ".button" and it will conflict with completely unrelated component's style tags which also have a class named ".button". You don't have this problem with CSS-in-JS. You isolate the styles completely.
    - madeofpalk 8y ago
      The core premise for CSS in JS is to work around CSS's global namespace. It means you can write styles for a component using a 'local namespace' and have to worry a lot less about accidentally affecting the styles of other parts of your site. Every other language has scoping, so why can't CSS? This is especially helpful as your site and team scales - you don't need to worry as much about stepping on other people's toes, nor do you need to be as aware of the entire (styling) scope of your website. When you do share/cascade/compose/extend styles, it makes it a lot more explicit in the way you do it. It's basically taking a concept like BEM and baking it into the language, reducing the mental overhead.

madeofpalk 8y ago

If you can't understand what it's doing from the source code, maybe read the documentation? I'm not a huge fan of Styled Components, but it's a way to write properly encapsulated styles for just that moment - You write 'regular CSS' that's scoped to exactly that component, so it can't leak out and affect other parts of your site.

hguhghuff 8y ago
I read the source code because I was trying to see how a solved problem needed so much code to implement.
- madeofpalk 8y ago
  I don't think Scoped CSS is a "solved problem". Well actually, I think CSS Modules solved it in the most "perfect" way, but I'm willing to believe that others have problems I haven't experienced before :)