Hoe groter het CSS-project wordt, hoe belangrijker het is om een schaalbare en vooral duidelijke structuur te creëren. Aangezien er veel verschillende benaderingen van dit probleem in de CSS-omgeving zijn, willen we in dit artikel kijken naar ITCSS van Harry Roberts.
Wat is ITCSS?
ITCSS is een schaalbaar meta-kader voor CSS, dat voor het eerst werd geïntroduceerd door Harry Roberts. ITCSS staat voor "Inverted Triangle CSS" en verwijst naar de sortering van CSS-instructies in oplopende volgorde van CSS-specificiteit. De specificiteit is de waarde van een CSS-instructie en wordt berekend door de waarden van alle selectors van een instructie op te tellen. Als voorbeeld heeft het statement body #content .data img:hover een specificiteit van 122: #content 100 + .data 10 + :hover 10 + body 1 + img 1. De individuele selectors hebben de volgende waarden:
- Universele selector *: 0
- HTML-elementen en pseudo-elementen: 1
- Klassen, pseudoklassen en attributen: 10
- ID's: 100
- Inline stijlen: 1000
- belangrijk heeft een "oneindige" specificiteit
De twee klassieke manieren om CSS te structureren zijn ofwel de structuur van de webpagina te spiegelen (stijlen voor de kop, dan de inhoud, dan de voettekst) of ze thematisch te groeperen (alle formulierstijlen, alle mediastijlen, blogposts, enz.). Het probleem van specificiteit doet zich echter voor: de browser moet voortdurend heen en weer springen om de juiste cascade van stijlen te kunnen toepassen. De resulterende specificiteitsgrafiek ziet er ongeveer zo uit:
Om de resulterende overloop en redundantie te minimaliseren, sorteren wij onze stijlen grofweg op specificiteit om een veel schonere specificiteitsgrafiek te krijgen. "Ruwweg sorteren" betekent in dit geval dat we proberen een gestaag stijgende grafiek te handhaven, we kunnen minimale schommelingen tolereren. Dit betekent dat we (in een ideale wereld) eerst alle HTML-elementen, dan alle klassen, en tenslotte alle ID's en verklaringen met een !important onder elkaar rangschikken. De stijlen zijn dus gesorteerd van algemeen naar specifiek, van ingrijpend naar lokaal.
Onze grafiek zou nu ongeveer deze vorm moeten hebben:
Met ITCSS sorteren we onze stijlen op oplopende specificiteit om een opgeruimde, niet-redundante CSS te krijgen.
Technische structuur met ITCSS en Grunt
Nu de functionaliteit van ITCSS is uitgelegd, is het tijd voor de technische uitvoering. Met behulp van LESS en Grunt kan een technisch schone en duidelijke oplossing worden geïmplementeerd, die we hier willen presenteren.
Zoals u in de schermafbeelding kunt zien, hebben we in ons voorbeeld de individuele ITCSS-lagen als mappen in de sjabloonmap aangemaakt. In deze structuur kunnen we nu afzonderlijke bestanden aanmaken voor verschillende taken voor een beter overzicht. De schermafbeelding toont bijvoorbeeld een stijlbestand voor media, een voor formulieren en een voor typografie. Het idee hierachter is dat alle bestanden in een directory altijd dezelfde specificiteit hebben. Als beste praktijk is het raadzaam om alle bestanden van een map te combineren in een _all.less bestand en vervolgens deze collectieve bestanden te verzamelen in het theme.less bestand. Een voorbeeld van een structuur volgens ITCSS is deze:
- Instellingen: LESS of SASS variabelen. Het zou hier zinvol zijn om bijvoorbeeld één bestand op te splitsen voor kleuren, lettertypes, rastermaten enzovoort.
- Gereedschap: Mixins van alle soorten. Hier kunnen bijvoorbeeld clear fixes worden opgeslagen of stijlen die op verschillende andere elementen kunnen worden toegepast. Opmerking: tot dit niveau wordt geen CSS aangemaakt!
- Algemeen: basisstijlen zoals normalize.css, resets of box-sizing worden hier opgeslagen. CSS wordt eigenlijk vanaf deze laag gegenereerd.
- Basis: eenvoudige HTML-elementen. Afzonderlijke bestanden voor formulieren, media (afbeeldingen, video's), typografie of tabellen zijn hier geschikt.
- Objecten: op klassen gebaseerde, niet-ontwerprelevante stijlen zoals een rastersysteem zijn hier te vinden.
- Componenten: op klassen gebaseerde, ontwerprelevante stijlen. Hier vindt u menu's, widgets of andere ontwerpspecifieke opmaak.
- Trumps: nee, deze laag heeft niets te maken met de Amerikaanse president. U kunt het ook Overschrijvingen of Pieken noemen: hier verzamelt u alle ID's, overschrijvingen voor gebruikte bibliotheken of verklaringen die !important gebruiken.
Nu we onze bestanden op deze manier gestructureerd hebben, is het tijd voor verdere verwerking met Grunt. Hiervoor zijn verschillende grunt-taken nodig: clean ruimt onze eerder gecompileerde bestanden op, concat combineert verschillende bestanden, less compileert onze LESS-bestanden tot CSS en cssmin minimaliseert de afgewerkte CSS. Omdat we ons aan de ITCSS-structuur hebben gehouden, zou onze CSS nu een dienovereenkomstig nette Specificity Graph moeten hebben.
Algemene opmerkingen over het gebruik van bibliotheken
Bibliotheken zoals Twitter Bootstrap of Zurb Foundation hebben hun plaats gevonden in de webontwikkeling. Het is echter belangrijk na te gaan welke componenten daadwerkelijk nodig zijn en of het de moeite waard is de hele bibliotheek te integreren. Uit onze ervaring blijkt dat dit meestal niet het geval is. Aangezien er in de meeste gevallen ook LESS of SASS versies van de bibliotheken zijn, moet u proberen deze versies direct op de juiste plaats in de ITCSS boom te integreren.
Natuurlijk is het het beste om mixins te gebruiken in plaats van de kant-en-klare stijlen, als de gebruikte bibliotheek die biedt. Zurb Foundation, bijvoorbeeld, biedt mixins voor veel van zijn componenten, zodat u ze kunt opnemen in de Tools laag en ze vervolgens kunt gebruiken in de respectieve laag (meestal Objects of Components) in uw eigen stijlen.
Iets over media queries
Omdat media queries bestaande CSS instructies overschrijven, is het een goede gewoonte om ze aan het einde van elk CSS bestand te plaatsen. Of u nu werkt met progressieve verbetering en min-breedte of met sierlijke degradatie en max-breedte is voorlopig niet relevant (hoewel wij progressieve verbetering zouden aanbevelen). Maar hoe kunnen de media queries, die onder normale omstandigheden verspreid zijn over de LESS broncode, netjes worden geïntegreerd in ITCSS?
Met behulp van de basistaak mqe (Media Query Extractor) kunnen we alle media queries uit onze afgewerkte CSS halen in aparte bestanden. We krijgen bijvoorbeeld een bestand voor het 768px breekpunt, het 992px breekpunt enzovoort. We kunnen deze extra bestanden nu weer samenvoegen met de basis concat opdracht in de gewenste volgorde (met de media queries aan het eind) en zo een CSS bestand verkrijgen waarin eerst alle normale stijlen zijn gesorteerd op specificiteit en vervolgens alle media queries in oplopende volgorde en ook gesorteerd op ITCSS. Tenslotte kan alles worden geminimaliseerd en geïntegreerd zoals gebruikelijk.
Nadat onze bestanden zijn gestructureerd in ITCSS-conforme mappen, kunnen we ze optimaliseren met Grunt: alle bestanden worden gecombineerd en gecompileerd, media queries worden uit de resulterende CSS gehaald en tenslotte samengevoegd tot een definitief CSS-bestand en geminimaliseerd.
Conclusie
ITCSS is een krachtig hulpmiddel voor het maken van krachtige en duidelijk gestructureerde stylesheets. ITCSS kan zonder problemen worden gebruikt met andere methoden zoals BEM en is naar wens schaalbaar. In combinatie met andere technieken zoals progressieve verbetering of optimalisaties zoals kritische CSS, bent u in staat om snel krachtige en vooral onderhoudbare stylesheets te maken voor uw eigen online shop of website.
Bronnen:
