(S) CSS Best Practices die u nog niet kent

Illustratie door Paula Jenda

Zelfs als u uw applicaties nu bouwt met behulp van een populair framework, zoals React, Angular of Vue.js, moet u er nog enkele stijlen aan toevoegen. Afhankelijk van de technologie die u gebruikt, moet u uw stijlen op een specifieke manier schrijven. Voor React is het, vanwege de componentkarakter, bijvoorbeeld beter om stijlen te schrijven met behulp van CSS-modules. Als u gloednieuwe CSS-functies wilt gebruiken, is het verstandig om CSSNext te gebruiken. Vergeet goede CSS-preprocessors niet, zoals Sass of MINDER. Je denkt misschien - zoveel tools, ik wed dat schrijfstijlen voor elk van hen verschillend is. Ja je hebt gelijk. Maar de basis is hetzelfde.

In dit artikel wil ik een paar leuke tips presenteren voor het schrijven van robuuste en onderhoudbare CSS, ongeacht of je fan bent van het gebruik van CSS-modules of Sass / LESS. Deze tips worden gepresenteerd in de SCSS-syntaxis, dus als u een inleiding tot Sass nodig hebt, is dit een goede plek om te beginnen. Als u gewone CSS gebruikt, uitgebreid met CSS Next, is dit artikel ook voor u. Deze basisconcepten kunnen eenvoudig worden gebruikt in andere CSS-tools of preprocessors.

Structureer je stijlen

Doordachte mappenstructuur helpt bij het onderhouden van uw project. Hetzelfde geldt voor je stijlen. Het is belangrijk om uw code te verdelen volgens elementen waarnaar ze verwijzen. Het opslaan van al uw regels in één groot bestand styles.scss zou zeker problemen veroorzaken. Vooral als u uw project wilt opschalen en nieuwe componenten wilt toevoegen.

Wat betreft de schaal van het project, is het van vitaal belang om de juiste stijlstructuur in te stellen. U moet zich concentreren op het bieden van structuur, die uw bestanden rangschikt volgens componenten die u in uw project gebruikt. Ik raad je aan om basisstijlen te scheiden van stijlen van componenten en thema's. Het is ook zinvol om alle mixins en variabelen in één map te combineren, afhankelijk van hun rol.

Hieronder ziet u een voorbeeld van een mapstructuur:

En main.scss:

Geef de kleuren een naam

U hebt dus een website-ontwerp en wilt beginnen met de codeerlay-out. Wat zou een verstandige aanpak zijn voor het beheer van kleuren in uw project? U kunt eenvoudig kleurwaarden rechtstreeks in stijlregels schrijven. Maar deze aanpak kan in de toekomst lastig zijn. Gelukkig geven zowel CSS als Sass ons variabelen.

In Sass kunt u elke waarde als variabele opslaan, dus het is redelijk om de kleurwaarde als variabele op te slaan. Meestal gebruiken we HEX (hexadecimalen) om de kleurwaarde te definiëren. Voor de mens ziet HEX eruit als een code, omdat het een formaat is dat is ontworpen voor computers. Het is moeilijk te zeggen welke kleur wordt geschreven als # 7fffd4 of # ffd700 (als u ze begrijpt, is het mogelijk dat u de CAPTCHA-test zou falen). De eerste is aquamarijn en de tweede is goud. Zou het niet eenvoudiger zijn om die kleuren op die manier een naam te geven?

Sommige kleuren spelen een specifieke rol bij het ontwerpen van websites. De ene kleur kan worden gebruikt als merkkleur, de andere is bedoeld als achtergrond. Hoewel we code voor de browser schrijven, moeten we een robuuste structuur voor onze kleuren bouwen. Het is goed om wat hulp van de ontwerper te hebben. Als je hem niet kunt overtuigen om het kleurenpalet te beschrijven, kun je het toch zelf doen.

Allereerst moet u beginnen met het benoemen van uw kleuren. Absoluut, het is moeilijk om HEX-waarde te vertalen naar een voor mensen leesbare naam. Gelukkig hebben we daarvoor het juiste gereedschap. Ik gebruik de website Name that Color, maar u kunt elk ander hulpmiddel gebruiken dat u verkiest.

Wanneer u namen voor uw kleuren hebt, kunt u er rollen aan toewijzen. U moet definiëren welke kleur als primair wordt gebruikt en welke als secundair. Als u niet zeker weet hoe u de rollen voor uw kleuren instelt, kunt u inspiratie opdoen uit het kleurenschema van Bootstrap.

Hier is een voorbeeld van een kleurinstelling:

Geneste verklaringen afvlakken

Het gebruik van CSS-preprocessor voegt niet alleen enkele handige functies toe aan uw toolset, maar helpt ook bij het organiseren van code. Het beste voorbeeld is het nesten van de aangifte van stijlen. In Sass is het mogelijk om selector in andere selectors te nestelen, zodat je kunt zien wat de relatie daartussen is. Het is echt een krachtige functie, dus het kan vrij gemakkelijk worden gebruikt.

Ik stel voor dat je niet meer dan 3 niveaus diep gaat. Deze regel is van toepassing op selector specificity en selectors nesting in CSS preprocessors. Verder gaan dan die limiet verhoogt niet alleen de kracht van de selector, maar kan het ook moeilijker maken om uw code te lezen.

Zie hieronder een voorbeeld:

Gebruik de referentie van de ouder niet te veel

In Sass is het mogelijk om referentie te krijgen van de ouder van de selector. In combinatie met nesten kunt u regels definiëren waarvoor de selector van de ouder nodig is. Bijvoorbeeld:

Soms kan het gebruik van & misleidend zijn. Hier is een voorbeeld van slecht gebruik van die selector:

Zoals u ziet, kan de ampersand-selector onnodige complexiteit toevoegen aan uw stijlen en het lezen van uw code bemoeilijken.

Schrijf eigenschappen in zinvolle volgorde

U hoeft uw eigenschappen niet te sorteren, maar u zou het moeten doen. Goed gesorteerde eigenschappen geven aan dat uw codestijl consistent is. Bovendien wordt het scannen van uw code gemakkelijker. Er is geen enkele bron van waarheid wat betreft het sorteren van eigenschappen. U kunt ze alfabetisch sorteren of op een andere voorkeur. Ik gebruik licht gewijzigde regels die zijn opgenomen in de opmaakrichtlijnen van de SMACSS-methode. Dit is mijn aanbevolen bestelling:

  • Box (positie, weergave, breedte, marge, etc.)
  • Tekst
  • Achtergrond
  • Grens
  • Overig (alfabetisch)

Gebruik de naamgevingsconventie van de klasse

Wanneer uw project groeit, kunnen stijlen behoorlijk rommelig worden. Vooral wanneer u bestaande regels moet uitbreiden. Helaas biedt CSS geen handige mechanismen die de botsing van de naamruimte voorkomen. Met andere woorden, alle stijlen die in CSS zijn geschreven, zijn globaal, dus het is heel goed mogelijk dat u sommige eigenschappen onverwacht overschrijft.

Vanwege de trapsgewijze aard van CSS is het belangrijk om zeer specifieke selectors te definiëren. Het betekent niet dat u selectors met een hoge specificiteit moet gebruiken. U moet algemene selectors, zoals tag-selectors, vermijden als u stijlen voor een bepaald element wilt toevoegen.

Hier is een voorbeeld:

Hopelijk is het schrijven van onderhoudbare stijlen niet zo moeilijk, als we een van de populaire naamgevingsconventies kunnen gebruiken - BEM, OOCSS of SMACSS. Ik geef de voorkeur aan BEM, een zeer populaire methode die is ontwikkeld door Yandex-ontwikkelaars. De naam is een acroniem van blok-, modificator- en elementwoorden. Als u niet bekend bent met BEM, raad ik u aan de documentatie te lezen.

Hier is ons voorbeeld, na verbijstering:

Beschrijvende mediaquery's schrijven

Mediavragen vormen het belangrijkste onderdeel van responsieve website-ontwikkeling. Dankzij hen kunnen we stijlen definiëren voor verschillende resoluties en de lay-out wijzigen op basis van het apparaat van de gebruiker. In CSS zijn mediaquery's een reeks regels, die worden getoetst aan de browser van de gebruiker. Wanneer voldaan, worden stijlen gedefinieerd in mediaqueryblok toegepast op de website.

U kunt verschillende apparaten targeten met behulp van query's, die typen en functies van media beschrijven. Vanwege de combinatie van de vele regels kan de mediaquery vrij eenvoudig worden.

Om media-vragen ontwikkelaarsvriendelijker te maken, kunnen we de regels aan een variabele toewijzen. In Sass is het mogelijk om string als normale CSS-code te gebruiken met behulp van de interpolatie accolades # {}.

Dezelfde truc die we kunnen gebruiken voor andere at-regels. Het kan handig zijn voor het definiëren van complexe regels voor @ondersteuningen.

Modulaire stijlen toevoegen

CSS heeft een set zeer nuttige selectors. In de meeste gevallen gebruikt u klassenkiezer of afstammingsselector. Maar er is nog een andere selector, die effectief is voor het schrijven van modulaire stijlen. Het is de aangrenzende broer selector, ook bekend als de plus selector.

Laten we ons voorstellen dat u stijlen wilt schrijven die alleen worden toegepast wanneer een element voorafgaat aan het element van de selector. U kunt bijvoorbeeld een marge toevoegen aan de tekst van het artikel wanneer deze een titel heeft. Hier is hoe je het kunt doen:

Het is een zeer handige manier om stijlen te definiëren, en mijn favoriete. Maar er zijn enkele afwegingen. Allereerst is dit niet de meest performante selector. Als u meer om prestaties geeft dan om modulariteit, moet u deze niet gebruiken. Ten tweede verhoogt het gebruik van de selector voor broers en zussen de specificiteit, dus het kan moeilijk zijn om de stijlen later te overschrijven. Het is tenslotte de moeite waard om het te gebruiken wanneer u stijlen wilt toepassen op basis van de aanwezigheid van elementen.

Verder lezen

Nu weet je hoe je leesbare, onderhoudbare en modulaire stijlen kunt schrijven. Als je meer advies nodig hebt om stijlen te schrijven om trots op te zijn, lees dan deze artikelen:

  • Sass-kleurvariabelen die niet zuigen door Landon Schropp
  • Geavanceerde SCSS, of 16 coole dingen die u misschien niet heeft geweten Uw stylesheets kunnen doen door Jarno Rantanen
  • Aangrenzende specificaties voor broers en zussen door W3C
  • Modulaire CSS-naamgevingsconventies door John W. Long
  • Responsive Web Design in Sass door Mason Wendell
  • Hoe een Sass-project van John W. Long te structureren

Vond je het leuk? Tik op de -knop! Dank je!

Je kunt me vinden op Twitter en Github.