Joshua Comeau taucht tief ein, wie styled-components funktioniert, indem er die Grundlagen neu aufbaut. Eine unterhaltsame und nützliche Reise.
Styled-components scheint der größte Akteur auf dem CSS-in-React-Markt zu sein. Obwohl ich in dieser Welt unterwegs bin, hat es mich bisher nicht vollständig überzeugt. Ich bin ein großer Fan der Grundlagen: isolierte Stile durch eindeutige Klassennamen. Ich mag auch, dass es mit Hot Module Reloading funktioniert, da alles in JavaScript geschieht. Aber das bekomme ich durch css-modules, und ich mag die Trennung von Dateien und die Sass-Unterstützung, die ich durch css-modules erhalte. Es gibt jedoch ein paar Dinge, von denen ich mich langsam überzeugen lasse (ein *wenig*).
- Selbst mit css-modules muss man sich Namen überlegen. Selbst wenn es nur so etwas wie
.rootoder was auch immer ist. Mit styled-components heftest du die Stile direkt an die Komponente und benennst eigentlich nichts. - Mit css-modules wendest du die Stile direkt auf ein HTML-Element an. Mit styled-components kannst du die Stile auf benutzerdefinierte Komponenten anwenden und es wird die Stile durch späteres Verteilen von Props hinzufügen.
- Da die Stile buchstäblich in den JavaScript-Dateien liegen, erhältst du JavaScript-Funktionen, die du nutzen kannst – Ternaries, Prop-Zugriff, schicke Mathematik usw.
Styled Components sind großartig! Je tiefer du dich damit beschäftigst, desto mehr großartige Dinge lernst du, die du damit tun kannst! Es ist wirklich meine Lieblingsart des Stylings in React!
Nur den für die sichtbaren Komponenten benötigten CSS-Code auszuliefern, ist ein weiterer großer Vorteil.
Ich bin mir nicht sicher, ob sich die kognitive Belastung durch Benennung bei styled components viel ändert. Man muss immer noch jede Komponente benennen.
Haben wir nicht vor einem Jahrzehnt, vor etwa einem Jahrzehnt, den Leuten beigebracht, dass Style-Attribute für HTML-Tags schlecht sind?