Inleiding tot ITCSS voor webontwikkelaars

Er zijn een paar geweldige methoden voor CSS-code structureren, en ze werken allemaal op verschillende manieren. De meest populaire zijn OOCSS en SMACSS, maar er is ook een minder bekende methode genaamd ITCSS (CSS met omgekeerde driehoek) gemaakt door Harry Roberts.

Het is geen bibliotheek of een kader, maar een methodiek van het schrijven van code dat is schaalbaar en gemakkelijk te manipuleren. De voordelen van ITCSS variëren van eenvoudige code-organisatie naar kleinere bestandsgroottes en een beter begrip van CSS-architectuur.

ITCSS is niet voor iedereen, maar biedt een professionele manier om tijdens het coderingsproces naar stylesheets te kijken met duidelijkheid. Laten we ingaan op de concepten achter ITCSS en bekijken hoe deze kunnen worden toegepast op webprojecten.

Wat is ITCSS?

Moderne manieren om CSS te organiseren komen vaak terug modularization of CSS-objecten om abstracte ideeën te construeren.

Het nieuwe idee van CSS met omgekeerde driehoek is een gelaagde manier om CSS-eigenschappen te splitsen op basis van hun niveau van specificiteit en belang. Het is een minder bekende methode vergeleken met SMACSS en OOCSS - hoewel beide kunnen worden gecombineerd met ITCSS.

Omdat ITCSS dat is meestal eigendom, er bestaat geen gedetailleerd rulebook over het gebruik ervan. Alleen een reeks specifieke principes staat tot onze beschikking. De auteur spreekt erover in de video hieronder.

Standaard gebruikt ITCSS dezelfde principes als OOCSS maar met grotere scheiding gebaseerd op specificiteit. Dus als u al bekend bent met OOCSS, beschouw dit dan als uniek alternatieve CSS-architectuur proberen.

Hier zijn enkele van de grootste voordelen van het gebruik van ITCSS:

• Pagina-objecten kunnen worden opgesplitst in hun eigen CSS / SCSS-bestanden herbruikbaarheid. Het is eenvoudig om elk object te kopiëren / plakken en uit te breiden naar andere projecten.
• Diepte van specificiteit is dat is jouw keuze.
• er is geen vaste mapstructuur, en geen vereist gebruik van voorbewerkingsgereedschap.
• U kunt concepten uit andere methodieken zoals CSS-modules samenvoegen in maak je eigen hybride workflow.

Het ITCSS-systeem

Laten we eens kijken hoe het omgekeerde driehoeksmodel werkt met behulp van de volgende illustratie uit het bericht van Lubos Kmetko.

Een gerichte stroming van de vlakke bovenkant van de omgekeerde driehoek naar beneden naar de punt aan de onderkant symboliseert een toename in specificiteit. Deze focus op minder specificiteit maakt het eenvoudiger om klassen meerdere keren opnieuw te gebruiken op een site.

Elke subsectie van de driehoek kan als een afzonderlijk bestand of een aparte groep bestanden worden beschouwd, hoewel u op die manier geen code hoeft te schrijven. Het is logischer voor Sass / Less-gebruikers vanwege de importfunctie. Denk gewoon aan elke subsectie als een methodologie voor opsplitsen en organiseren van herbruikbare CSS-code.

Laten we even kijken elke sectie van de omgekeerde driehoek verplaatsen van boven naar beneden naar de punt.

• instellingen - Preprocessorvariabelen en -methoden (geen daadwerkelijke CSS-uitvoer)
• Hulpmiddelen - Mixins en functies (geen daadwerkelijke CSS-uitvoer)
• Algemeen - CSS-resets, waaronder de reset van Eric Meyer, Normalize.css of uw eigen batch code
• Elements - Enkele HTML elementselectoren zonder klassen
• Voorwerpen - Klassen voor paginastructuur meestal volgens de OOCSS-methodiek
• Components - Esthetische klassen voor het stylen van alle & alle pagina-elementen (vaak gecombineerd met de structuur van objectklassen)
• Trumps - De meest specifieke stijlen om iets anders in de driehoek te negeren

Elke laag van de omgekeerde driehoek kan zijn aangepast aan uw behoeften. Dus als u geen CSS-preprocessor gebruikt, hebt u de lagen Instellingen of Hulpprogramma's niet nodig.

Je moet je vrij voelen om elke subsectie naar eigen inzicht te interpreteren. Jordan Koschei legt bijvoorbeeld uit hoe hij structuur en esthetiek samengevoegd in objectklassen, waardoor er heel weinig overblijft in de sectie Componenten.

ITCSS heeft geen harde en snelle regels die je moet volgen. Er is geen ITCSS-nalevingschecker en niemand zal u uitschreeuwen omdat u dit model enigszins hebt gewijzigd.

Hoewel de maker van ITCSS, Harry Roberts, geïnteresseerd was om zijn methoden eigen te houden voor intern gebruik, kunt u een open source voorbeeld van ITCSS in deze GitHub-repo. Het wordt gehost door het CSS Wizardry-account, de persoonlijke website van Harry Roberts.

BEM + IT = BEMIT Naming

Een van de populairste CSS-naamgevingsschema's is BEM. Dit staat voor Block-Element-Modifier en volgt een zeer specifieke syntaxis.

Elk element in BEM beschrijft een naamgevingsconventie voor CSS-klassen:

• Blocks zijn klassen voor individuele elementen die kunnen worden gerepliceerd en op zichzelf staan.
• Elements zijn altijd onderdeel van een blok
• modifiers wijzig altijd een blok of element om het uiterlijk enigszins te veranderen (aan / uit, actief / inactief, vast, statisch, highlight / neutraal).

BEMIT is de naamgevingsconventie overgenomen door ITCSS, die ideeën van BEM leent tijdens het implementeren van nieuwe ideeën met ITCSS.

BEM-syntaxis dicteert zeer specifieke regels. Hieronder staat een voorbeeld van de BEM-website:

.form  .form - theme-xmas  .form - simple  .form__input  .form__submit  .form__submit - disabled  

Blokken hebben namen zonder scheiding of namen gescheiden door een streepje of een onderstrepingsteken. Elementen gebruiken twee underscores en ze beschrijven interne elementen die consistent zijn met dat specifieke blok. Modifiers werken op dezelfde manier maar gebruiken twee streepjes voor identificatie.

Harry duikt dieper in BEMIT in deze blogpost. Zijn beschrijving is zeer beknopt en het laat zien dat het de ware aard van ITCSS is speel vriendelijk met andere CSS-methodologieën.

Harry bepaalt naamruimten voor objecten verschijnen als voorvoegsels voor elke hoofdklasse. Ze gaan kapot als O- voor objecten, c- voor componenten, en u- voor hulpprogramma's (zoals clearfix of tekst centreren).

Hier zijn enkele voorbeeldcodes die vertegenwoordigen typische BEMIT-naamconventies.

  
... 
 
 

Hij beveelt ook het gebruik van de @ achtervoegsel voor klassen op basis van mediastijlen. Dus de .o-media klas kan veranderen in .o-media @ lg voor grote schermen, en .o-media @ md voor middelgrote schermen.

Persoonlijk denk ik dat de extra achtervoegsels zijn te ingewikkeld voor eenvoudige webprojecten. Ik denk dat de meeste ontwikkelaars liever gewone mediaquery's gebruiken en de klassen op verschillende breekpunten herschrijven. Maar ik kan niet zeggen dat elke methode goed of fout is en dat iedereen individueel kan beslissen of hij BEMIT wil gebruiken of niet.

Ik raad ten zeerste aan om dit intro BEMIT-artikel te lezen om meer te weten te komen over waarom ITCSS BEM heeft uitgebreid, en hoe u uw CSS-klassen een naam zou kunnen geven.

ITCSS kan worden samengevat als een organisatiemethode om te schrijven herbruikbare en schaalbare CSS. BEM is de naamgevingssyntaxis die de voorkeur heeft, en BEMIT breidt dit uit om te werken met naamruimten voor specifiekere en herkenbare code.

Er valt veel te leren, en als je nieuw bent bij CSS, is dit een moeilijk te doorbreken concept. Maar als u bereid bent om te leren, garandeer ik u dat u verrast zult zijn door de slankheid van de ITCSS-code.

Afsluiten

Front-end ontwikkelaars zijn altijd op zoek om hun workflow te optimaliseren. ITCSS is slechts een andere methode die kan bijdragen aan een verbeterde methode voor het structureren van complexe websites.

De moeilijkheid is leren hoe het werkt in echt projectwerk. Als je de moed hebt en je wilt leren, dan is ITCSS misschien de moeite waard om aan je toolkit toe te voegen. Hoewel ik geen officiële documentatie heb gevonden, zijn er nog steeds veel bronnen online om meer te weten te komen over ITCSS.

• Beheer grootschalige webprojecten met nieuwe CSS-architectuur ITCSS (Creativebloq.com)
• CSS-projecten beheren met ITCSS - presentatiedia's (Speakerdeck.com)
• CSS-projecten met ITCSS (1 uur video-presentatie)
• ITCSS - Een interessante manier om grootschalige projecten te organiseren (Css-tricks.com)

(Coverfoto via speakerdeck.com)