De combinatie van de Bevoegdheden van SEM en BIO voor het Verbeteren van CSS

0
45

CSS is gemakkelijk, sommigen beweren, maar dat het “gemak” kan leiden tot een slordige code. Dit geldt vooral door de macht van preprocessors zoals Sass of Minder waar, als je niet oppast, je CSS kan moeilijker zijn te behandelen in plaats van gemakkelijker. Sass? Moeilijker? Deze Kern geeft een goed voorbeeld van Sass nesten van de hel.

Als je Sass code eruit ziet, je kan zeker verbeteren van uw code met SEM & BIO, een CSS-techniek zal ik u voorstellen aan nu!

In dit artikel, ik zal gebruik maken van het onderstaande voorbeeld om uit te leggen hoe SEM en BIO werkt en hoe ze kunnen helpen verbeteren van uw CSS-strategie.

Zie de Pen door thebabydino (@thebabydino) op CodePen.

In het algemeen, SEM is bezig met een hoog niveau van CSS filosofie overwegende dat BIO is een techniek om u te helpen bij het schrijven van een CSS te bereiken SEM. Het belangrijkste doel van zowel SEM en BIO is beter met de CSS-specificiteit dat is een van de belangrijkste concepten die u moet begrijpen voor CSS.

Credit: Nana Jeon

Ten eerste, laten we praten over SEM.

SEM

SEM staat voor:

  • Schaalbaar
  • Uitbreidbaar
  • Houdbaar

Proberen te bereiken van deze drie factoren kan zeker verbeteren van uw CSS-code en het helpt u bij het opbouwen van uw componenten veel meer solide.

Laten we praten meer over elke factor in detail.

Schaalbaar

Een schaalbaar (of hergebruik) component betekent dat dezelfde kijken onderdelen moeten worden gebruikt waar u wilt, zonder enige codering veranderingen.

Credit: Nana Jeon

Van de CodePen bovenstaande voorbeeld, de “Zoeken” knop in de header ziet er precies hetzelfde als de ‘Link’ knop in de zijbalk. Wanneer we vergelijken met de HTML-markup,

  • de “Zoek” knop is de knop <> element
  • maar de knop “Link” is <a role=”button” …> element

…en zelfs als de opmaak is anders, de stijlen zijn identiek, met dezelfde klassen: .c-btn-en .c-btn–geel.

De knop stijlen zijn schaalbaar en het laat u toe om hetzelfde op zoek onderdelen waar je maar wilt, het zal niet worden verontreinigd door zijn ouders of broers en zussen. Dit kunt u het opslaan van de grote hoofdpijn niet te weten waarom die volledig los staan van onderdelen kapot zijn, zelfs als de wijzigingen zijn aangebracht op een ander onderdeel van een totaal andere plaats.

Bron: Cartoon Network

Uitbreidbaar

Een uitbreidbare component kan gemakkelijk extra functies/functionaliteiten zonder te breken zelf hoeven te worden geschreven vanuit het niets.

Laten we eens kijken naar de CodePen weer het voorbeeld.

Zie de Pen door iamryanyu (@iamryanyu) op CodePen.

De knop in de header en in de main-sectie lijken nogal op elkaar, naast het 3D-effect. In dit geval, in plaats van het maken van twee verschillende sets van knoppen met totaal andere code basen, kunnen we uitbreiden met de eenvoudige knop stijl door alleen het toevoegen van het 3D-effect aan.

Het gaat het zelfde met de knop in de voettekst. Hoewel de knop heeft een andere kleur en grootte, kunnen we gemakkelijk kunnen uitbreiden door het toevoegen of verwijderen van nieuwe of andere functies.

Credit: Nana Jeon

Houdbaar

Waarschijnlijk een van de grootste uitdagingen voor de meeste front-enders is te begrijpen CSS geschreven door andere mensen, of ons verleden. We soms meer tijd besteden aan het proberen te begrijpen van het bestaande code toevoegen vreselijk geschreven nieuwe code.

Het probleem komt meestal uit:

  • geen opmerkingen, dan ook
  • over-engineering
  • geen enkele bron van waarheid
  • no coding standard/best practice beschouwd
  • of alle van hen boven
Credit: Nana Jeon

Met SEM en BIO, we kunnen zeker verbeteren van de code en bespaar anderen (inclusief onszelf!) uit rommelig, steeds onbeheersbare code.

BIO

Er worden veel verschillende technieken die er zijn voor het verbeteren van de manier waarop we schrijven CSS, en vanuit mijn ervaring, ik vond de volgende drie technieken die de BIO acronym werken heel goed samen

  • BEM
  • ITCSS
  • OOCSS
Credit: Nana Jeon

Veel ontwikkelaars/ingenieurs weten al die beroemde technieken, maar ik zou graag om te gaan door middel van elk van hen en praten over de manier waarop ik het gebruik van die technieken.

BEM

BEM is erg populair methodologie en het heeft geholpen ons een aanzienlijke verbetering van de manier waarop we denken over CSS en Sass/Minder.

BEM staat voor:

  • Blok
  • Element
  • Modifier
Credit: Nana Jeon

Als het slechte voorbeeld hierboven laat zien, hebben we de neiging om overmatig gebruik van de kracht van de Sass/Minder en vallen in nesten-een hel. Maar GOED, we beginnen met een zeer lage CSS specificiteit door het handhaven van de stijlen in één (of twee) niveaus van nesten.

Als u hebt ervaren een veldslagen vechten hoger CSS specificiteit, u weet hoe pijnlijk het is om te komen uit een winnaar.

Terug naar ons voorbeeld, de HTML-code ziet er zo uit:

<div class=”o-grid”>
<div class=”o-raster__item o-grid ‘- __ – header”>

</div>
<div class=”o-raster__item o-raster__main”>

</div>
<div class=”o-raster__item o-raster__sidebar”>

</div>
<div class=”o-raster__item o-raster__footer”>

</div>
</div>

Het voorbeeld bestaat uit:

  • een blok: .o-raster
  • elementen: .o-raster__item .o-raster__header .o-raster__main .o-raster__zijbalk .o-raster__voettekst

Omdat BEM biedt een naamgeving die de nadruk legt op unieke klassen, we hoeven niet verder te gaan in diepe nesten zoals:

.o-raster {
.o-grid ‘ – __ – item {

}
}

In plaats daarvan kunnen we bepalen de stijlen met een aantal niveaus:

.o-grid ‘ – __ – item {

}

Dit is de grootste verdienste van BEM; het verlagen van de CSS-specificiteit) waardoor de hele CSS codering efficiëntie en ervaring.

Een probleem zie ik nog steeds af en toe zelfs met BEM is een slechte naamgeving. Als je niet genoeg aandacht besteed, kunt u de wind met een echt lange-klasse nam zoals:

/* Yikes! */
.o-grid ‘ – __ – item-zoek-knop-tekst-svg-icon {

}

Wanneer u de naam van een klasse, gaat u met de kern van het concept van BEM: uw component is een blok en alle elementen binnen zijn individueel aangesloten op het blok.

Uit ons weer het voorbeeld dat ik noemde .o-raster__formulier in plaats van .o-grid ‘ – __ – item-vorm, omdat het formulier zelf is een apart onderdeel en hoeft niet te worden gebonden en met een kind van o-raster__item.

Ook voor een efficiëntere controle stijlen, heb ik een ander naam van de klasse o-raster__kop samen met o-grid ‘ – __ – item voor het verlengen van de stijlen. Bovendien, de knop bevat BEM-stijl klassen met de aanpak van de OOCSS, die we zullen tik op volgende.

OOCSS

Zoals we reeds hebben besproken, er zijn vele grote CSS methodieken en strategieën helpen ons bij het verbeteren van de manier waarop we schrijven CSS. Echter, ik zie een heleboel mensen dwingen zichzelf om te beslissen over een methodiek voor het gebruik van het bos.

Vanuit mijn ervaring, een combinatie van methodieken daadwerkelijk kunnen verbeteren en hun voordelen door het combineren van het beste van meerdere werelden. Bijvoorbeeld, persoonlijk heb ik gevonden dat BEM en OOCSS werken heel goed samen.

OOCSS staat voor Object Oriented CSS en je kan het zien als Lego blokken:

Bron: Flickr

OOCSS maakt elke individuele gedeelte afzonderlijk te factureren en vervolgens bouwt ze samen om te bouwen onderdelen.

Uit ons voorbeeld, ik heb de knoppen met behulp van de OOCSS naamgeving:

  • .c-btn
  • .c-btn–geel
  • .c-btn–blauw
  • .c-btn–3d
  • .c-btn-groot

Om te zorgen dat de gele knop zoeken in ons voorbeeld kop, combineren we deze klassen:

  • .c-btn
  • .c-btn–geel

Als we willen dat de 3D-knop in de main-sectie, voegen we in de 3D-klasse .c-btn–3d en noemen het een dag.

En voor de blauwe knop in de voettekst, kunnen we schakelen de gele modifier blauw samen met de grote modifier. Zoals u kunt zien, de knop is niet afhankelijk van de header blok geeft ons meer flexibiliteit met hoe we het gebruiken en hergebruiken componenten. En, door dit te doen, kunnen we bouwen de knoppen zonder gevolgen voor de andere onderdelen of patronen, terwijl het verkrijgen van het voordeel van het eenvoudig uitbreiden van nieuwe representatieve functie, zoals alternatieve kleuren en vormen.

Hier een voorbeeld van een knop collectie gemaakt met OOCSS te maken van de variaties:

Zie de Pen Moderne Knop Collectie van Ryan Yu (@iamryanyu) op CodePen.

Op de top van de BEM en de OOCSS, met de hulp van ITCSS, kunnen we verder met het verbeteren van onze CSS-strategie. Laten we eens kijken naar die methode naast.

ITCSS

ITCSS staat voor Omgekeerde Driehoek, CSS en het helpt bij het ordenen van CSS door het aanbrengen van een structuur die bepaalt hoe specifiek te krijgen met een specifiek onderdeel. Lubos Kmetko heeft geschreven een uitstekend overzicht van ITCSS dat waard is om te lezen.

U kunt zien hoe ik heb ITCSS te gebruiken door het splitsen van stijlen door gegroepeerd niveaus van specificiteit in deze Kern.

Op basis van dit voorbeeld kunt u zien hoe ik de naam van componenten door het toevoegen van een naamruimte naar de klas. Dus, bijvoorbeeld, een van de “knop” component wordt aangeduid met een “c”.c-toets) om aan te geven van het onderdeel status en voorkomen dat het wordt verward met een ander item. Door dit te doen, iedereen die werkzaam is op het project kent de functie van die specifieke klasse en hoe het veranderen van de eigenschappen van invloed kunnen zijn op andere gebieden.

Hier is een visual die geeft alle ITCSS niveaus:

We gaan door elke sectie.

Instellingen

Instellingen zijn over het algemeen een verzameling van variabelen die niet het genereren van CSS, maar worden toegepast op de klassen. Enkele voorbeelden zijn:

  • Basis
  • Kleur
  • Typografie
  • Animatie

Hulpmiddelen

Tools zal ook geen enkele CSS nog en zijn meestal preprocessor functies die helpen met het schrijven of uit te breiden eigenschappen van klassen:

  • Functies
  • Tijdelijke aanduidingen
  • Mixins
  • Media query ‘ s

Leveranciers

Verkopers zijn derde-partij stijlen die worden gebruikt op een project. Denk aan dingen als reset.css, normaliseren.css, of zelfs Foundation en Bootstrap.

De reden dat deze stijlen zijn hoger in de structuur is zodat we kunnen vervangen indien nodig. Zoals u zich wellicht herinnert, als de klas wordt twee keer genoemd, de cascade zal maken van de eigenschappen van het tweede exemplaar, in de veronderstelling dat de eigenschappen zijn precies hetzelfde:

.btn–grote {
padding: 3em;
}

/* Deze wint uit */
.btn–grote {
padding: 5em;
}

Slechts voor de zijde nota, in Sass, kunt u gebruik maken van ~ naar de node_modules map, zodat je in staat bent om importeer stijl van de activa van de bron gaan in plaats van te verplaatsen in uw eigen mappen.

@import ‘~modern-normaliseren/moderne-normaliseren’;
Objecten

Objecten (naamruimte: o-) worden gebruikt voor het design patterns, zoals lay-outs, waar zaken worden geregeld in plaats ingericht. Object-klassen worden gebruikt op alle pagina ‘ s, dus als u eventuele wijzigingen aan het object klassen, moet u zeer voorzichtig zijn, omdat eventuele veranderingen zullen van invloed zijn op iedere pagina in de website.

De meest voorkomende object classes die ik gebruik zijn:

  • .o-pagina: het meest buitenste container die meestal bevat max-width: 100vw en overflow: hidden.
  • .o-belangrijkste: de buitenste container voor de main-gebied.
  • .o-container: de buitenste container voor onderdelen en levert doorgaans een vaste breedte.
  • .o-inhoud: in het geval als enige extra configuratie nodig is voor de werkelijke inhoud van het gebied.
  • .o-rooster: als de indeling van een raster met een verschillend aantal kolommen zijn vereist.

Gebruikt u een andere object-klassen? Als dat zo is, neem dan met mij te delen. 😃

Elementen

Elementen (naamruimte: e-) de HTML-inheemse elementen die we niet zouden stijl gebaseerd op de namen van de klassen. Bijvoorbeeld, we moeten leveren standaard stijlen op de <a> – element in plaats van .link-klasse.

// Doe dit voor de standaardstijl
een {
text-decoration: none;

en:hover {
background-color: blue;
kleur: wit;
}
}

// Geen standaardstijl tot een klasse
.link {
text-decoration: none;

en:hover {
background-color: blue;
kleur: wit;
}
}

Het is omdat, zeker in een CMS zoals WordPress, je zou niet willen een klasse toe te voegen elke keer dat u gebruik wilt maken van een koppeling naar de inhoud. Daarom bieden wij een standaard stijl aan de <a> – element, dus zonder enige klasse, zal de link nog steeds goed uitziende stijlen.

Onderdelen

Een component (naamruimte: c-) is een kleine eigenschap die maakt een deel van de website. Denk knoppen, accordeons, schuifregelaars, modale dialoogvensters, enz. Elk onderdeel is volledig functioneel door zelf en niet afhankelijk is van de andere onderdelen. Dit feit moet worden beschouwd als wanneer u de naam van de component.

Bijvoorbeeld, de knop in de hoofd sectie van het bovenstaande voorbeeld mag het niet genoemd worden .c-main-toets, omdat de belangrijkste bereiken in de main-sectie en de beperkingen van het gebruik van ict in andere plaatsen, zoals in een zijbalk. Zoiets .c-btn is veel leuker, omdat de toets is niet langer gebonden aan enige andere specifieke gedeelten van de pagina.

Als u behoefte heeft aan extra functies, kunt u altijd uitbreiden van woningen met een BEM-modifier (het combineren van krachten!) of gebruik Scope, die komen in een bit.

Patronen

Veel ontwikkelaars/ingenieurs gebruiken de termen component en patroon als synoniemen en dat is helemaal prima als je meer comfortabel. Het is gewoon mijn voorkeur te scheiden van die twee begrippen.

Voor een algemene regel van de duim, ik denk van een patroon (naamruimte: p-) als een combinatie van de onderdelen, maar op een manier die niet schaalbaar.

Bijvoorbeeld, ik zou rekening houden met de accordeon als een component. Het is schaalbaar en herbruikbare op zijn eigen, wat betekent dat het kan worden gebruikt in andere delen van de website zonder enige wijzigingen aan te brengen, zelfs als de accordeon zou bevatten andere onderdelen zoals de knoppen.

Aan de andere kant, de header, bijvoorbeeld, zou een patroon, want het is niet schaalbaar (in de header kan niet worden gebruikt in de inhoud of de zijbalk) en bevat ook andere onderdelen zoals de knoppen, accordeons, menu ‘s, logo’ s, zoeken formulier enz.

Omvang

Wees gewaarschuwd; ik gebruik alleen de omvang als het echt nodig is. Het doel van het toepassingsgebied (naamruimte: s-) is voor ons de hoogste specificiteit, zodat we kunnen overschrijven stijlen voor een bepaald doel.

Vergeet niet, Als je jezelf met de omvang klasse vele malen, je zou het schrijven van stijlen die te specifiek zijn en moet u overwegen refactor uw CSS structuur.

Hier is een eenvoudig voorbeeld van het gebruik van het toepassingsgebied van de klas .s-home.

.c-accordeon {
.s-home & {
// Het wijzigen van de achtergrondkleur speciek op de homepage
background-color: tomaat;
}
}

Als een side-note, is de bovengenoemde voorbeeld zou eigenlijk herwerkt door het verstrekken van een modifier aan de accordeon (bijv., .c-accordeon–bg-tomaat) in plaats van met de omvang klasse. Dat zou een veel meer extensible manier van schrijven en de component meer modulair.

Extra Naamruimte

Op de top van de namespaces die we hierboven besproken, zijn er twee die ik vaak gebruik:

  • is-: dit geeft de status van het blok of element. Meest gebruikte klasse is .is-actief, zoals de actieve link in de navigatie.
  • js-: dit geeft aan dat het specifieke element is gebonden aan JavaScript-events. Bijvoorbeeld, js-menu-klik geeft aan dat het element is gebonden aan de gebeurtenis click.

Pluizende

Tot slot het maken van regels .stylelint en .eslint kan een aanzienlijke verbetering van de kwaliteit van de code.

In de front-end-workflow, ik maak het niet als een aanbeveling, ik maak het verplicht te stellen, zodat bij gebreke van de regels zal niet goedgekeurd worden.

Op deze manier kunnen wij ervoor zorgen dat de codering van de kwaliteit van het verblijf van de beste en betere code aan andere ontwikkelaars, met inbegrip van je toekomstige zelf.

In Actie

In deze sectie, wil ik graag bespreken hoe kunnen we gebruik maken van SEM en BIO. Ik heb een eenvoudige, praktische voorbeeld om ons begonnen:

Zie de Pen door iamryanyu (@iamryanyu) op CodePen.

De algemene praktijk met het voorbeeld is het bouwen van een accordeon die kan worden gebruikt als:

  • een normale accordeon, maar met een andere kleur thema ‘ s in de main-sectie
  • een menu in de sidebar
  • een blok weergeven van de social media iconen in de voettekst

Wat we bereiken is een component die is:

  • Schaalbaar: als het kan worden toegevoegd in een deel van de pagina zonder enige codering wijzigingen
  • Uitbreidbaar: als het kan dienen verschillende functionaliteiten met de core functies ongewijzigd
  • Houdbaar: zo is georganiseerd op een manier die zinvol is

Te bereiken SEM, BIO is gebruikt, met inbegrip van:

  • BEM: .c-accordeon als een blok en haar kinderen als elementen, ook gebruikt modifiers, bijvoorbeeld .c-accordeon–en licht .c-accordeon–donker
  • ITCSS: Het ordenen/sorteren van de SASS-bestanden omgaat met de CSS-specificiteit heel goed. Bijvoorbeeld, de accordeon, de knop in de zijbalk bevat class=”c-accordeon__trigger p-sidebar-menu__knop” die het patroon (p-) overschrijft het onderdeel (c) met geen problemen.
  • OOCSS: de accordeon is opgebouwd uit verschillende lessen, bijvoorbeeld class=”c-accordeon c-accordeon–donkere c-accordeon–single” dat creëert een donkere thema met het openen van een enkel paneel alleen elke keer.

Laatste gedachten

Ik heb gebruik gemaakt van deze aanpak voor bijna al mijn projecten, met inbegrip van universiteiten, overheidsinstellingen, commerciële retailers, en vele andere websites. In elk geval, ik heb bezorgd in alle projecten aan de klanten (bijna geen problemen tijdens de opdrachtgever goedkeuring en op tijd geleverd); deze aanpak werkte voor mij zeer goed en ik denk dat het kan voor u als goed.

Dat gezegd zijnde, technologieën, altijd wijzigen (vooral op de front-end) en ik ben meer dan blij zijn om te horen en bespreken van uw ideeën, benaderingen en strategieën die voor u gewerkt. Laat het me weten in de comments!

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!