Best practices voor stylen met React

Foto door Pankaj Patel op Unsplash

Een van de leukste onderdelen van het werken op internet is dat je op zo'n visueel medium aan de slag kunt. Het grootste deel van het visuele aspect is duidelijk hoe het eruit ziet. Het stylen van een webpagina is al lang geleden begonnen met het toevoegen van markup en attributen om dingen zoals lettertypen en kleuren te veranderen, in Cascading Style Sheets van vandaag. Nu in onze wereld van webapplicaties en JS Frameworks, is het internet geëvolueerd en hebben we ook best practices. Dit is vooral het geval bij het werken in een framework zoals React.

Hoe 'stijl' u uw webpagina met React?

Reageren, op zichzelf en zonder enig ander hulpmiddel, ondersteunt twee manieren om elementen te stijlen: de stijlprop, de stijltag en CSS-stijlbladen. De stijlprop neemt een JS-object met CSS-eigenschappen en -waarden en vertaalt dat uiteindelijk naar stijlen van een element, zoals deze:

// JSX
   Rode tekst   // DOM
   Rode tekst

Omdat het alleen inline-stijlen zijn, krijg je nog steeds de hoogste specificiteit, maar ben je beperkt in wat je toegang hebt tot stijl.

De stijltag en CSS-stijlbladen werken precies hetzelfde als werken met pure HTML-opmaak. Het grootste verschil is dat je theclassName prop moet gebruiken in plaats van klasse. Zowel de id prop als className prop nemen ofwel een string of een expressie die wordt geëvalueerd als een string, zoals deze:

// JSX
// DOM

Het op schaal houden van CSS kan erg uitdagend worden, dus de React-community heeft tools ontwikkeld die de ontwikkelaarservaring verbeteren bij het op schaal houden van CSS. Er zijn er meerdere die zijn gemaakt, maar de twee grootste zijn waarschijnlijk CSS-modules en CSS-in-JS (en meer specifiek stijl-componenten / emotie).

Met CSS-modules kunt u een CSS-bestand als een JS-module behandelen. U importeert een CSS-bestand en de klassen in het CSS-bestand worden als eigenschappen op een JS-object als volgt behandeld:

css importeren uit './index.css';
// DOM

Je zult merken dat de klasse die uiteindelijk werd gebruikt, de naam van de klasse plus een hash was. Deze hash is toegevoegd aan de klas om ervoor te zorgen dat deze uniek is in onze app.

Hierdoor hoeft de ontwikkelaar niet de hele scope van de app te kennen en te weten hoe de CSS die we schrijven de rest van de Cascade zal beïnvloeden. Het is namelijk typisch dat elk onderdeel zijn eigen CSS-bestand heeft wanneer u CSS-modules gebruikt. CSS-modules moeten worden ingeschakeld als onderdeel van een bouwproces, bijvoorbeeld in Webpack om van de tool te kunnen profiteren.

Styled-Component en Emotion zijn twee zeer populaire bibliotheken die hetzelfde doel als CSS-modules vervullen, maar het op een andere manier aanpakken. Beide bibliotheken profiteren van de syntaxis van de tagged template literals, geïntroduceerd in ES6. Eenvoudig gezegd, getagde sjabloonliteralen zijn functies die worden opgeroepen met een letterlijke tekenreeks. De functie ontleedt de sjabloonliteralen en kan dienovereenkomstig handelen.

Hoe deze bibliotheken werken, schrijft u CSS als een sjabloonreeks, de functie ontleedt de sjabloonreeks, injecteert deze in een stijltag van het document en retourneert een component met de juiste klasse die al is geïnjecteerd. Hier is een voorbeeld van hoe het werkt (het voorbeeld gebruikt stijlcomponenten, maar emotie gebruikt een bijna identieke API):

gestileerd importeren uit 'gestileerde componenten';
const Layout = styled.div`
   weergave: rooster;
`;
// DOM

Zoals u kunt zien, bereikt het hetzelfde doel als de CSS-module, maar in plaats van de scoped-klasse tijdens het bouwen te maken, bouwt het de CSS tijdens runtime. Dit zorgt voor veel coole functies die buiten het bereik van dit bericht vallen, maar ik zou je willen aanmoedigen om ze te bekijken in de documenten voor stijlcomponenten en emotie.

Met al deze manieren om te stylen, wat is de beste manier om te stylen? Veel is subjectief en hangt echt af van de voorkeur van de ontwikkelaar of het ontwikkelteam. Dat gezegd hebbende, zijn er enkele best practices naar voren gekomen.

Inline-stijlen zijn niet langer 'slecht'

Een van de eerste dingen die ik leerde tijdens het leren van CSS was dat inline-stijlen slecht waren, niet goed schalen en ten koste van alles moesten worden vermeden. Maar het is belangrijk om de redenen te begrijpen waarom ze als 'slecht' worden beschouwd.

Inline stijlen worden als slecht beschouwd omdat inline stijlen alleen van toepassing zijn op dat specifieke element. Als u diezelfde stijl, zoals een primaire knop, moet reproduceren, moet u van het ene deel van uw app naar het andere kopiëren en plakken. Wanneer u nu rekening houdt met ingrijpende stijlveranderingen en stijlen die slechts gedeeltelijk hetzelfde zijn over twee elementen, moet u een nachtmerrie hebben.

In een component-gebaseerd framework, zoals React, speelt dit geen rol meer. Als u een gestileerd element op meer dan één plaats nodig hebt, gebruikt u op beide plaatsen dezelfde component. Als de stijl voor beide elementen verandert, hoeft u nog maar één component bij te werken, zodat deze niet dezelfde schaalproblemen heeft als wanneer u rechtstreeks met HTML werkt.

Inline stijlen laten ook toe stijlen te configureren via rekwisieten. U kunt bepaalde elementen blootleggen via rekwisieten die moeten worden geconfigureerd door de gebruiker van uw component. Als u stijlconstanten hebt die universeel op uw site worden gebruikt, kunnen deze worden bewaard in een map met stijlconstanten en worden geïmporteerd. Hier volgt een voorbeeld van hoe u dat allemaal kunt doen:

Deze methode is niet perfect. Inlinesstijlen geven bijvoorbeeld geen toegang tot pseudo-selectors of mediaquery's. Maar het is niet slecht om inline-stijlen meer te gebruiken en moet zeker deel uitmaken van de toolbox van een ontwikkelaar.

Componenten mogen zichzelf niet positioneren

In een componentgebaseerd raamwerk, zoals React, scheiden we onze zorgen op componentniveau, inclusief de stijlen. Een component weet niet waar het wordt weergegeven, noch wie zijn broers en zussen zijn, als die er zijn. Het weet ook niet hoe het wordt gepositioneerd. De ouder kan bijvoorbeeld flexbox, css-grid, floats of absolute positie gebruiken. Er is dus geen manier om waarden in te stellen zoals marge, positie, flex-zelf of een andere eigenschap zoals deze.

Het dilemma is dat CSS niet is ontworpen rond een componentgebaseerd raamwerk en veel van deze eigenschappen moeten op kindniveau worden ingesteld, wat betekent dat het kind moet 'weten' over de omgeving, ondanks het feit dat het niet weet .

Hoe kunnen we dit omzeilen? Er zijn 3 manieren waarop we dit kunnen doen. Een manier is om de className en / of style rekwisieten bloot te stellen zodat stijlen kunnen worden geïnjecteerd, zoals deze:

const Widget = ({className = '', ... props}) =>
         
//of
const Widget = ({style = {}, ... props}) =>
        

Het mogelijke nadeel hiervan is dat het uw andere stijlen openstelt om te worden overschreven, wat vaak ongewenst is, vooral wanneer u in een ontwerpsysteem werkt. Om hiertegen te beschermen, kunt u uw stijlen, die u niet wilt overschrijven, als laatste plaatsen. Je kunt het zo doen:

const Widget = ({className = '', ... props}) =>
         
//of
const Widget = ({style = {}, ... props}) =>
        

Een andere manier om dit te doen, is door specifieke waarden, zoals marge of positie, expliciet bloot te leggen. Uw component kan vervolgens logica uitvoeren om ervoor te zorgen dat de steun correct is en deze toepassen. Dit geeft je meer controle, maar dwingt je als Component-auteur om elke prop te behandelen die je wilt blootleggen.

Een derde manier is om uw component samen te stellen in "wrappers" waarin die positionering is ingebouwd, zoals hier:

const Layout = () => (
   
     
        
     
   
);

Dit geeft meer controle zonder specifieke velden bloot te leggen. Maar het kan veel indirection veroorzaken wanneer je veel van deze wrappers overal hebt. De beste manier om wrapper hell te bestrijden zou zijn om ze samen te stellen in hun eigen component, zoals het gebruik van een component van een hogere orde.

Stijlen moeten worden geabstraheerd

Ik ben hier al eens op ingegaan in mijn bericht over proberen te veel te doen in je React-componenten. Er zijn veel tools die u kunt gebruiken om stijlen toe te voegen aan uw component en hoe deze stijlen worden toegepast, is meestal niet belangrijk wanneer u uw elementen samenstelt. Onze componenten zouden er minder als volgt uit moeten zien:

const SideBar = ({title}) => (
   
     

        {titel}            
                   ):

En meer zoals dit:

const SideBar = ({title}) => (
   
     
        {titel}
     </ Titel>
     <Body>
        <Widget />
     </ Body>
   </ Container>
):</pre><p>Het tweede voorbeeld is het juiste abstractieniveau bij het samenstellen van de SideBar-component. Bij het samenstellen van de SideBar-component maakt het me niet zoveel uit hoe de stijl wordt toegevoegd, alleen dat de stijl is toegevoegd. Het eerste voorbeeld is veel luidruchtiger en vertraagt ​​mijn vermogen om te begrijpen wat de component doet.</p><p>Een webpagina opmaken is erg belangrijk voor een webpagina. Het uiterlijk van onze webpagina kan een website maken of breken. Gelukkig hebben we veel tools en best practices die ons kunnen helpen een geweldig uitziende website te leveren die onze gebruikers graag gebruiken.</p></div><div class="neighbor-articles"><h4 class="ui header">Zie ook</h4><a href="/deal/how-git-best-practices-saved-me-hours-of-rework-7e1419/" title="Hoe Git best practices mij uren werk hebben bespaard">Hoe Git best practices mij uren werk hebben bespaard</a><a href="/deal/best-mobile-components-for-progressive-web-apps-in-vuejs-c85963/" title="Beste mobiele componenten voor progressieve web-apps in VueJs">Beste mobiele componenten voor progressieve web-apps in VueJs</a><a href="/deal/finding-my-best-of-both-worlds-2e8180/" title="Mijn beste van beide werelden vinden">Mijn beste van beide werelden vinden</a><a href="/deal/4-best-practices-that-will-improve-your-messaging-4dfe2a/" title="4 praktische tips die uw berichten verbeteren">4 praktische tips die uw berichten verbeteren</a><a href="/deal/this-week-s-best-of-coti-in-the-media-39e969/" title="Het beste van deze week COTI in de media">Het beste van deze week COTI in de media</a></div></main><div class="push"></div></div><footer style="height:50px">finleyandoliver.com<!-- --> © <!-- -->2019<!-- --> <a href="https://no.finleyandoliver.com/deal/styling-best-practices-using-react-ce4247" title="https://finleyandoliver.com">finleyandoliver.com</a></footer></div></div></div><script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script><script>
                  window.cookieconsent.initialise({
                    "palette": {
                      "popup": {
                        "background": "#eaf7f7",
                        "text": "#5c7291"
                      },
                      "button": {
                        "background": "#56cbdb",
                        "text": "#ffffff"
                      }
                    },
                    "showLink": false
                  });
              </script><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script>
                (adsbygoogle = window.adsbygoogle || []).push({
                  google_ad_client: "ca-pub-3845662922897763",
                  enable_page_level_ads: true
                });
              </script></body></html>