Styled Components Usage, AM I THE COMPLETELY CLUELESS ONE?
Is there any good reason to use styled components?
Videos
ยป npm install styled-components
Long story short, I'm a newer dev at a company. Our product uses React/TS/StyledComponents. One of the other devs makes a new StyledComponent for every small little thing. Is this good usage? For me it seems easier and more readable to use a P tag and add a classname versus creating a StyledComponent for it. Especially if its just some text with barely any styles to it. So instead of writing...
<p className='title-text'>Title Here</p> they write... <TitleText>Title Here</TitleText> but for everything??
I feel like it causes a lot of context switching where other devs would have to grok whether you are working with another 'actual React component' or not. Then have to go to the style file and see what tag it really is etc. I find it much easier to see a P tag and know exactly what I am working with in a fraction of the time. Am I completely wrong on this?
Bla
Bla bla
Not every element needs to have its own Styled-Components declaration. Semantic HTML is supposed to be targeted like this. It's a weaker specificity, but since it's encapsulated in a Styled-Component with generated unique classNames, you'll be more than fine. It's much more intuitive, IMO.Main benefits of styled-components are listed in the Motivations page on their website.
styled-components is the result of wondering how we could enhance CSS for styling React component systems. By focusing on a single use case we managed to optimize the experience for developers as well as the output for end users.
Apart from the improved experience for developers, styled-components provides:
- Automatic critical CSS: styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary.
- No class name bugs: styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
- Easier deletion of CSS: it can be hard to know whether a class name is used somewhere in your codebase. styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.
- Simple dynamic styling: adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes.
- Painless maintenance: you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
- Automatic vendor prefixing: write your CSS to the current standard and let styled-components handle the rest.
With styled components it's possible to "enhance" CSS classes with JavaScript code because are written in JS.
const Input = styled.input`
color: ${props => props.hasError ? 'red' : 'black'};
`;
Opposed to writing 2 separate CSS classes and control which to show with JS.
.text {
color: black;
}
.text--danger {
color: red;
}
<input className={`text ${hasError ? 'text--danger' : ''}`} />
On the long run it can produce more maintainable code, but it's a matter of personal opinion if it's better to use it or not.
The reason styled components is pushed in React web development is to encapsulate styles to only those components. There is no risk of bleeding css into other components. Rather than learn a new css organisation structure new developers can onboard more quickly.
That being said, it is restrictive, slower to develop with, and adds some page weight by applying same styles you could have shared.
I have found the fastest way to work is create static html webpages with pure css, and organise it in a way you are going to import it into your framework. Then you can have boilerplate html designs that can be tested independently of the compiler, which is so much faster to test in Internet Explorer, Firefox, chrome, mobile devices and all the varying screen sizes.
If you want to use styled components, you can either use this npm plugin to convert your static css into variables to use with style components - https://www.npmjs.com/package/@inspiraller/create-css-vars
or just don't. Nextjs does not support css imports unless its global, so webpack compiling option is a more universal solution.
I've seen a lot of people hopping on that and more and more people implementing it in their applications. After checking it out I had to hold back both my vomit and tears from seeing what seems like the world's least readable way of using css. Besides the admittedly subjective "Ewwww code ugly" response I tried finding ANY benefit over css frameworks like tw or even just writing it yourself and aside from the typical react lazyness of writing absolutely everything in js i couldn't find good things about it. Also it seems rather rediculous to render css on client runtime (I honestly didn't have it left in me to check out if you could render it ssr on if using Next or something like it). I'm not usually someone who just writes of libraries and frameworks as useless blackbox pieces of shit (except fucking bootstrap ofc) but styled-components seems a lot like that to me. It honestly feels like back in jQuery days where devs just couldn't be bothered with reading up on how dom works and just used that messy shitshow of a library instead.
TLDR; Is there anything I'm missing that is nice about it?