@Desu:
Co do styled components - porównajmy dwie wersje:
a) html + classes
const Post = ({ title, content }) => (
<article className="post">
<img className="post__title-image" src="" />
<h2 className="post__title">{title}</h2>
{content.split('\n').map(thought => <p className="post__thought">{thought}</p>)}
</article>
)
.post {
...styles
}
.post__title-image {
...styles
}
.post__title {
...styles
}
.post__thought {
...styles
}
b) styled components
const Post = ({ title, content }) => (
<PostContainer>
<TitleImage src="" />
<Title>{title}</Title>
{content.split('\n').map(thought => <Thought>{thought}</Thought>)}
</PostContainer>
)
const PostContainer = styled.article`
...styles
`
const TitleImage = styled.img`
...styles
`
const Title = styled.h2`
...styles
`
const Thought = styled.p`
...styles
`
Twórcy styled components zachwycają się jaki kod jest piękny, semantyczny - no cóż, może i wygląda ładnie na pierwszy rzut oka, ale:
- ukrywa semantykę tworzonego HTMLa - a ta z punktu widzenia końcowego produktu jest dużo ważniejsze - weź zrób code review czegoś takiego pod kątem wynikowego kodu ;/
- to, że nie widzisz rzeczywistej struktury to jedno, jak już się dopatrzysz błedów to refaktorowanie znaczników skacząc po poszczególnych "styled components" to udręka (pół biedy jak są chociaż w tym samym pliku) - niepotrzebna fragmentaryzacja kodu (właściwie to całkowite rozczłonkowanie opisu struktury dokumentu i wymieszanie jej z definicjami stylów),
- w wersji klasycznej masz widoczną zarówno strukturę HTMLa jak i warstwę abstrakcji zawartą w nazwach klas,
Podsumowując - uważam styled components za zbędną warstwę abstrakcji, a co ważniejsze - jest to "leaky abstraction" i zaciemnianie kodu.
Nie wiem, może czegoś nie rozumiem ;/