CSS-schrijfmethodologieën begrijpen

In deze post zullen we zien wat CSS schrijfmethodieken zijn, een aantal bekende methodieken 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 methodologie 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.

Voor betere resultaten, we verbeteren onze methoden door ze beter te plannen, de volgorde wijzigen, stappen vereenvoudigen - wat dat ook is sneller en is meer doeltreffend.

CSS-methode

Laten we het nu hebben over de CSS-methode. Net als met bijna alles in het leven, hebben we ook een methode om CSS te schrijven: sommigen schrijven eerst CSS opnieuw, sommige plaatslay-outstijlen duren, sommige 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 na verloop van tijd hebben CSS-veteranen geformuleerd methodologieën om CSS te schrijven dat zijn meer flexibel, gedefinieerd, herbruikbaar, begrijpelijk en handelbaar.

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)

Notitie: Geen van de onderstaande concepten moet worden verward met een kader, bibliotheek of tool met dezelfde naam en hetzelfde concept als deze methoden. Dit bericht gaat alleen over de methodologieën om CSS te schrijven.

1. OOCSS

Ontwikkeld door Nicole Sullivan in 2008, bevatten de belangrijkste concepten van OOCSS (Object Oriented CSS) CSS voorwerp identificatie, scheiding van structuur en visuele stijlen, en het vermijden van locatiegebaseerde stijlen.

In OOCSS is de allereerste stap die Nicole voorstelt doen identificeren objecten in CSS.

“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 door 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 preview van titels die we zullen noemen post-voorbeeld van het primaire en een zijbalk met titels die we zullen noemen post-voorbeeld-secundaire.

We moeten afzonderlijke structuur en huid (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 klasse geven post-preview-beeld en voeg de code toe 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 soortgelijke objecten zijn, gebruiken we deze opnieuw post-preview-beeld voor hen.

Huidscheiding kan ook worden gedaan voor eenvoudiger stijlen zoals randen of achtergronden. Als u meerdere objecten met dezelfde blauwe rand hebt, een afzonderlijke klasse maken voor de blauwe rand en het toevoegen aan objecten zal verminder het aantal keren dat de blauwe randen moeten worden gecodeerd in CSS.

Nicole suggereert ook om niet stijlen toevoegen op basis van locatie, bijvoorbeeld, in plaats van alle links binnen een bepaalde div te markeren, geef die links een markeerstift klasse 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.

Cons van OOCSS: Zonder een behoorlijke hoeveelheid zich herhalende visuele patronen lijken scheiding 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 & wijziger en ze dienovereenkomstig te benoemen.

EEN “blok” is in wezen hetzelfde als een “voorwerp”(uit het voorbeeld hiervoor), een “element” verwijst naar de componenten van het blok (afbeelding, titel, preview-tekst in het bovenstaande Preview-functie- voorwerpen). EEN “wijziger” 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, handelt de actieve klasse als uw modifier.

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

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

Voor modifiers kunnen we ook gebruiken sleutel waarde formaat voor naamgeving. Als u bijvoorbeeld menu-items wilt onderscheiden die verwijzen naar verouderde artikelen, kunnen we ze de klas geven menu__item_status_obsolete, en voor het stylen van menu-items die naar in behandeling zijnde documenten verwijzen, kan de klassenaam zijn menu__item_status_pending.

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

De BEM-site geeft ook een lijst weer hoe de segregatie van blokken, elementen en modificaties ook in het CSS-bestandssysteem kunnen worden gebracht. De blokken houden van “toetsen” en “input” kunnen hun eigen mappen hebben die de bestanden (.css, .js) bevatten die aan die blokken zijn gekoppeld, wat het gemakkelijker maakt als we die blokken in andere projecten willen importeren.

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

Nadelen van BEM:Om de namen er gezond uit te laten zien, adviseert BEM 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 21^st De kernbegrippen van ACSS bestaan ​​uit het maken van klassen voor het meest atomaire niveau van styling, d.w.z. een eigenschap-waardepaar, en deze vervolgens zo nodig in HTML te gebruiken.

Het is moeilijk te bepalen wanneer ACSS (Atomic CSS) voor het eerst werd ontwikkeld sinds het concept al een tijdje in gebruik is. Ontwikkelaars hebben klassen gebruikt zoals .clearfix overloop: verborgen voor een lange tijd. Het idee in ACSS is om een klasse hebben voor vrijwel elk herbruikbaar niet-inhoudgerelateerd eigenschap-waardepaar hebben we nodig 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.

Voordelen van ACSS:HTML stylen zonder HTML te verlaten.

Nadelen van ACSS:Te veel lessen, niet erg netjes en misschien haat je het.

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 rigide raamwerken in een flexibel denkproces te passen. - Jonathan Snook”

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

• Basisstijlen 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.

Voordelen van SMACSS:Beter georganiseerde code.

Nadelen van SMACSS: Geen dat 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 zullen je een systeem geven beheer en optimaliseer 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).