CSS-schrijfmethodologieën begrijpen

In deze post gaan we kijken wat CSS-schrijfmethodologieën zijn, enkele bekende methodologieën en hoe ze ons kunnen helpen bij het optimaliseren van onze CSS-code. Laten we beginnen met de eenvoudigste vraag om de bal aan het rollen te krijgen. Wat is een methodiek?

Een methodiek is een systeem van methoden . Beschouw een methode als gewoon een manier om iets op een systematische manier te doen, op een bepaalde vooraf ingestelde manier om dingen te doen om het gewenste resultaat te bereiken.

Om betere resultaten te behalen, verbeteren we onze methoden door ze beter te plannen, de volgorde aan te passen, de stappen te vereenvoudigen - wat dan ook sneller werkt en efficiënter is .

CSS-methode

Laten we het nu hebben over de CSS-methode. Net zoals met zo ongeveer alles in het leven, hebben we ook een methode om CSS te schrijven: sommigen schrijven eerst CSS opnieuw, sommige plaatslay-outstijlen duren, sommigen beginnen met twee of drie klassen om een ​​element te stylen, anderen schrijven alle CSS-codes in een enkel bestand.

Onze voorkeursmethoden zijn ofwel op eigen kracht in de loop van de tijd vastgesteld of beïnvloed door anderen of vereist op onze werkplek of vanwege al het bovenstaande. Maar in de loop van de tijd hebben CSS-veteranen methoden geformuleerd om CSS te schrijven die flexibeler, gedefinieerd, herbruikbaar, begrijpelijk en beheersbaar zijn .

We gaan kijken naar die geformuleerde methodologieën, waaronder:

1. OOCSS (Object Oriented CSS)
2. BEM (Block, Element, Modifier)
3. ACSS (Atomic CSS)
4. SMACSS (schaalbare en modulaire architectuur voor CSS)

Opmerking : geen van de onderstaande concepten moet worden verward met een kader, bibliotheek of tool die dezelfde naam en hetzelfde concept kan hebben als deze methoden. Deze post gaat alleen over de methodieken om CSS te schrijven.

1. OOCSS

Ontwikkeld door Nicole Sullivan in 2008, omvatten de sleutelconcepten van OOCSS (Object Oriented CSS) CSS- objectidentificatie, scheiding van structuur en visuele stijlen en het vermijden van locatiegebaseerde stijlen.

In OOCSS is de allereerste stap die Nicole ons voorstelt, om objecten in CSS te identificeren .

"Kortom, een CSS" object "is een herhalend visueel patroon, dat kan worden geabstraheerd tot een onafhankelijk fragment van HTML, CSS en mogelijk JavaScript. Dat object kan vervolgens op een hele site worden hergebruikt. - Nicole Sullivan, Github (OOCSS) "

Neem bijvoorbeeld deze structuur van deze site. Hier is iets dat een herhalend visueel patroon is en zijn eigen onafhankelijke HTML en / of CSS heeft:

We hebben hier twee soorten objecten, een grotere voorvertoning van titels die we post-preview-primary zullen noemen en een zijbalk met titels die we een post-preview-secondary zullen noemen.

We moeten structuur en huid scheiden (dwz stijlen die het uiterlijk van de objecten creëren). De twee typen objecten hebben verschillende structuren, de ene bevindt zich in een groter vak, hoewel ze er hetzelfde uitzien, met afbeeldingen aan de linkerkant en titels aan de rechterkant.

Laten we de afbeeldingen van beide objecten een post-preview-image een klasse geven en de code toevoegen die de afbeelding aan de linkerkant plaatst. Dit weerhoudt ons ervan om de code te herhalen van waar de afbeelding in objecten in CSS moet worden geplaatst. Als er andere, vergelijkbare objecten zijn, gebruiken we dit post-preview-image .

Huidscheiding kan ook worden gedaan voor eenvoudiger stijlen zoals randen of achtergronden . Als u meerdere objecten met dezelfde blauwe rand hebt, maakt u een afzonderlijke klasse voor de blauwe rand en voegt u deze toe aan objecten. Dit vermindert het aantal keren dat de blauwe randen in CSS moeten worden gecodeerd .

Nicole suggereert ook om geen stijlen op basis van locatie toe te voegen, in plaats van alle links binnen een bepaalde div te markeren, geef die links een markeerstiftklasse met de juiste CSS-stijlen. Op deze manier kunt u de markeerstiftklasse opnieuw gebruiken als u een koppeling in een ander deel van de pagina wilt markeren.

Voors van OOCSS : herbruikbare visuele stylingcodes, flexibele locatiecodes, vermindering van diep geneste selectors.

Nadelen van OOCSS : zonder een behoorlijke hoeveelheid zich herhalende visuele patronen lijken het scheiden van structuur en visuele stijlcodes onnodig.

2. BEM

Ontwikkeld door ontwikkelaars bij Yandex in 2009, omvatten de belangrijkste concepten voor BEM (Block, Element, Modifier) ​​het identificeren van blok, element & modifier en ze dienovereenkomstig te benoemen.

Een "blok" is in wezen hetzelfde als een "object" (uit het voorgaande voorbeeld), een "element" verwijst naar de componenten van het blok (afbeelding, titel, preview-tekst in de bovenstaande preview-post- objecten). Een "modifier" kan worden gebruikt wanneer de status van een blok of element verandert, bijvoorbeeld wanneer u een actieve klasse toevoegt aan een menu-item om deze te markeren, dan fungeert de actieve klasse als uw modifier.

Nadat u de componenten hebt geïdentificeerd, geeft u deze een naam. Bijvoorbeeld:

• een menublok heeft het klassenmenu
• de items hebben het menu__item (blok en element worden gescheiden door een dubbel onderstrepingsteken)
• de modifier voor de uitgeschakelde status van het menu kan de klasse menu_disabled (de modifier wordt begrensd door een enkel onderstrepingsteken)
• modifier voor de uitgeschakelde status van een menu-item kan menu__item_disabled .

Voor modifiers kunnen we ook de key_value indeling voor naamgeving gebruiken. Als u bijvoorbeeld menu-items wilt onderscheiden die verwijzen naar verouderde artikelen, kunnen we hen het klassenmenu__item_status_obsolete menu__item_status_obsolete en voor het menu__item_status_obsolete menu-items die naar in behandeling zijnde documenten wijzen, kan de klassenaam menu__item_status_pending .

De naamgeving kan worden aangepast aan wat voor u werkt. Het idee is om te kunnen identificeren, blokkeren, elementen en modifiers van de klassenamen . Bekijk enkele van de naamgevingssystemen op de BEM-site.

De BEM-site geeft ook aan hoe de segregatie van blokken, elementen en modificaties ook in het CSS-bestandssysteem kunnen worden gebracht . De blokken zoals "knoppen" en "ingangen" kunnen hun eigen mappen hebben die bestaan ​​uit de bestanden (.css, .js) die aan die blokken zijn gekoppeld, wat het gemakkelijker maakt als we die blokken in andere projecten willen importeren.

Voordelen van BEM: gemakkelijk te gebruiken class-namen en vermindering van diepe CSS-selectors.

Tegens van BEM: om de namen gezond uitziende te houden, raadt BEM aan dat we blok blijven houden aan element dat ondiep nestelt.

3. ACSS

Beroemd gemaakt door Yahoo, ergens tegen het einde van de eerste decennium van de 21ste eeuw, bestaat de belangrijkste concepten van ACSS uit het creëren van klassen voor het meest atomaire niveau van styling, dat wil zeggen een eigenschap-waardepaar, en deze vervolgens in HTML te gebruiken waar nodig.

Het is moeilijk te bepalen wanneer ACSS (Atomic CSS) voor het eerst werd ontwikkeld sinds het concept al een tijdje in gebruik is. Ontwikkelaars gebruiken al lange tijd klassen als .clearfix{overflow: hidden} . Het idee in ACSS is om een klasse te hebben voor vrijwel alle herbruikbare niet-inhoudgerelateerde eigenschap-waardeparen die we nodig hebben op onze site en om die klassen toe te voegen wanneer dat nodig is voor de HTML-elementen.

Hieronder ziet u een voorbeeld van klassen op basis van ACSS en hoe deze in HTML worden gebruikt.

 .mr-8 {margin-right: 8px;} .fl-r {float: right;} 

Zoals u kunt zien, zal het aantal klassen hoog worden met deze methode en de HTML zal druk zijn door al die klassen. Deze methode is niet 100% effectief maar kan indien gewenst nuttig worden gemaakt. Yahoo gebruikt dit toch.

Voors van ACSS: HTML- stijl zonder HTML te verlaten.

Nadelen van ACSS: Te veel klassen, niet erg netjes en je zou het misschien een hekel hebben.

4. SMACSS

Ontwikkeld in 2011 door Jonathan Snook SMACSS (Scalable and Modular Architecture for CSS) werkt door de 5 verschillende soorten stijlregels te identificeren. Klasse namen en archiveringssysteem worden op basis hiervan gecreëerd.

"SMACSS is een manier om je ontwerpproces te onderzoeken en om die starre raamwerken in een flexibel denkproces te passen. - Jonathan Snook "

SMACSS identificeert 5 soorten stijlregels, namelijk basis, lay-out, module, status en thema .

• Basistijlen zijn de standaardstijlen die zijn gericht op de eenvoudige HTML-tags zoals

  , .

• Lay-outstijlen zijn stijlen die worden gebruikt om de lay-out van de pagina te definiëren, zoals codering waarbij de kop-, voettekst- en zijmenu's worden weergegeven.
• Modulestijlen zijn specifiek voor een module zoals galerij of diavoorstelling.
• Staatsstijlen zijn voor het markeren van elementen met veranderlijke staten zoals verborgen of uitgeschakeld.
• Thema wordt gebruikt voor het wijzigen van het visuele schema van de pagina.

De verschillende stijlregels kunnen worden geïdentificeerd met behulp van een prefix in de klassennaam, bijvoorbeeld l-header (voor lay-out) of t-header (voor thema). We kunnen deze verschillende soorten regels ook organiseren door ze in afzonderlijke bestanden en mappen te plaatsen.

Voors voor SMACSS: beter georganiseerde code.

Tegens van SMACSS : Geen die ik kan bedenken.

Er is een gratis online boek dat je over SMACSS kunt lezen, of je kunt de e-boekversie ervan kopen om het verder te bestuderen.

Conclusie

De bovenstaande CSS-methodologieën bieden u een systeem voor het beheren en optimaliseren van uw CSS-codes . Ze kunnen worden gecombineerd, zoals OOCSS-SMACSS of OOCSS-BEM, of BEM-SAMCSS om aan uw behoeften te voldoen.

Er zijn ook kaders en bibliotheken als u een geautomatiseerd systeem wilt voor het uitvoeren van CSS-methodologieën, zoals:

• OOCSS-raamwerk
• BEM-tools
• Organisch CSS-raamwerk (volgt atomisch concept).