Reageren Styling— Best Practices

CSS is een wispelturig ding. Als een beginner in ontwikkeling is styling voor het grootste deel altijd een verwarrende onverklaarbare puinhoop geweest. Er is een klassieke CSS-grap die het goed samenvat:

“Twee CSS-eigenschappen lopen een bar binnen. Een barkruk in een heel andere bar valt om. ”

En het is waar! Heb je ooit gemerkt dat soms (maar niet andere tijden ...) het veranderen van de stijl van een klasse in CSS de stijlen van verschillende andere dingen verandert? Sommige daarvan mogen op geen enkele manier aan die klasse worden gekoppeld? Ik heb. Dus als een "oplossing" plaatsen we meerdere klassennamen op één element (en gooien we een ID in voor de lol ...), maar zelfs BEM-naamconventies hebben het onderliggende probleem nooit echt opgelost: CSS is niet alleen bedoeld voor grote projecten. Bovendien is CSS (als een aparte stylesheet) niet alleen bedoeld voor React.

Hier is een screenshot van een vorig project van mij. Kopklassen overal, ID's zijn overal verspreid. Het was een troep.

De lange en bochtige weg van CSS. Klassen en ID's rondgegooid, verschillende behoren tot verschillende componenten en niet te onthouden welke, en niet te vergeten organisatie is een hoofdpijn.

Voer: Styled-Compon Compon in

Er zijn tonnen en tonnen manieren om styling te gebruiken in React, maar een manier die de beste praktijk lijkt te zijn, is om componenten binnen je component direct te laten stylen. Deze gestileerde componenten hebben alleen invloed op dat specifieke component waarin ze worden weergegeven, en niets anders. Componenten in React werken het beste wanneer ze klein, gericht en herbruikbaar zijn.

CSS-stijl voor een knop (oude manier)Gestileerde component geeft dezelfde knop weer in ReactHet toevoegen van een primaire props aan de knop is eenvoudig!

Zoals u kunt zien, wordt de stijl voor de component Knop allemaal behouden binnen de specifieke component waarin deze wordt gebruikt. Merk op dat we JavaScript-logica rechtstreeks in onze CSS kunnen schrijven omdat we getagde sjabloonliteralen gebruiken. Ongekend!

Stylingstijl

CSS-stijlbibliotheken zoals Bootstrap, Materialise, etc. komen allemaal uit met hun eigen React-specifieke componentbibliotheken. Omdat er geen classNames zijn, kunt u de CSS niet targeten om deze in uw stijl te wijzigen. De enige manier om de stijlen te veranderen, is door de stijl als een object te wijzigen (wat een barrière vormt voor sommige front-end ontwikkelaars die niet bekend zijn met javascript). Dit resulteert in elke. website. op zoek. precies. hetzelfde. Nu kunt u met opgemaakte componenten een aangepaste opgemaakte component maken die zich richt op de thematische component. Super cool.

Een component met een aangepaste stijl maken en vervolgens die gestileerde component stileren. Zoveel stijl!

Organisatie & leesbaarheid

Het gebruik van gestileerde componenten is ook een geweldig hulpmiddel om uw React-componenten te organiseren. In plaats van uw JSX met

s en s te strooien, kunt u de componenten gewoon met hun eigen stijlen weergeven! Aangezien er geen inline stijlen zijn, wordt de code heel gemakkelijk te lezen en te onderhouden. En als u een stijlwijziging wilt aanbrengen, kunt u dit doen zonder enig ander onderdeel te beïnvloeden! Verbazingwekkend.

JSX kan een beetje rommelig worden met talloze <div> s, <span> s en inline stijlenHoi schoonheid.

'Beste oefening'

U kunt nog steeds style sheets gebruiken met gestileerde componenten (hoewel dat hier duidelijk het punt zou verslaan ...) en er zijn ook ingebouwde manieren om globale stijlen te injecteren (zoals CSS-bestanden normaliseren of resetten). Het stileren van componenten binnen de componenten zelf is een best practice die veel ontwikkelaars in React specifiek volgen. Ik moedig iedereen aan om hier wat onderzoek naar te doen, vooral als ze op component-gebaseerde front-end talen zoals React en Angular 2 willen komen.

Hier zijn enkele links voor meer informatie:

David Chan geeft een lezing over styling op componentniveau in React
Hij gaat in op het maken van stijlen voor op componenten gebaseerde systemen in het algemeen.

Glen Maddern geeft een lezing over componentgebaseerde systemen
Co-maker van stijlbibliotheek componenten gaat over styling voor componenten in het algemeen, richt zich niet op de bibliotheek zelf.

Officiële stijl componenten webpagina en link naar GitHub:
Documentatie is gedetailleerd en beknopt.

Max Stoiber geeft een lezing op ReactConf 2016
Co-maker van stijlcomponenten gaat in detail en neemt vragen over de nieuwe stijlbibliotheek.

JavaScript Jabber podcast-aflevering met Max Stoiber
Stoiber spreekt over create-react-app, die hij ook heeft gemaakt, evenals de bibliotheek met gestileerde componenten.