Genom att kombinera de Befogenheter som SEM och BIO för att Förbättra CSS

0
48

CSS är lätt, vissa skulle kunna argumentera för, men att “enkelhet” kan orsaka rörig kod. Detta är särskilt sant genom kraften av förbehandling som Sass eller Mindre där, om du inte är försiktig, din CSS kan bli svårare att ta itu med istället för att lättare. Sass? Svårare? Denna Sammanfattning visar ett bra exempel på Sass häckande helvete.

Om din Sass koden ser ut så att du kan definitivt förbättra din kod med SEM & BIO, en CSS-teknik ska jag presentera dig för nu!

I denna artikel kommer jag att använda koden exempel nedan att förklara hur SEM och BIO fungerar och hur de kan hjälpa till att förbättra din CSS-strategi.

Se Pennan genom att thebabydino (@thebabydino) på CodePen.

I allmänhet, SEM är en fråga med hög nivå CSS filosofi medan BIO är en verklig teknik för att hjälpa dig att skriva bättre CSS för att uppnå SEM. Det huvudsakliga syftet med både SEM och BIO är att bättre hantera CSS specificitet som är en av de viktigaste begrepp som du bör förstå för CSS.

Kredit: Nana Jeon

Först av allt, låt oss tala om SEM.

SEM

SEM står för:

  • Skalbar
  • Extensible
  • Lätt att underhålla

Försöker att uppnå dessa tre faktorer kan definitivt förbättra din CSS-kod och det hjälper dig att bygga dina komponenter mycket mer solid.

Låt oss tala mer om varje faktor i detalj.

Skalbar

En skalbar (eller återanvändbara) komponent innebär att samma letar komponenter bör användas överallt där du vill, utan att någon kodning förändringar.

Kredit: Nana Jeon

Från CodePen exemplet ovan, “Sök” – knappen i huvudet ser ut exakt samma som “Link” knappen i sidomenyn. När vi jämför den HTML-kod,

  • “Sök” – knappen är knappen <> – elementet
  • men “Link” knappen <a roll=”knappen” … > – elementet

…och även om koden är olika, de stilar som är identiska med hjälp av samma klasser: .c-btn-och .c-btn–gul.

Knappen stilar är skalbar och det tillåter dig att lägga till samma letar komponenter vart du vill så kommer det inte vara förorenad av sina föräldrar eller syskon. Detta kan spara dig från den stora huvudvärk av att inte veta varför helt orelaterade komponenter är trasig, även om de ändringar som görs på en annan komponent från en helt annan plats.

Källa: Cartoon Network

Extensible

En utbyggbar komponent kan lätt ge ytterligare egenskaper/funktioner utan att bryta sig själv eller behöva skrivas om från början.

Låt oss titta på CodePen exempel igen.

Se Pennan genom att iamryanyu (@iamryanyu) på CodePen.

Knappen i huvudet och i main-sektionen ser ganska lika förutom att 3D-effekten. I det här fallet, istället för att skapa två olika uppsättningar av knappar med en helt annan kod, baser, skulle vi kunna förlänga slätten knappen stil genom att lägga till 3D-effekter till det.

Det går på samma sätt med knapp i sidfoten. Även om knappen har en annan färg och storlek, kan vi lätt utöka den genom att lägga till eller ta bort nya eller olika funktioner.

Kredit: Nana Jeon

Lätt att underhålla

Förmodligen en av de största utmaningarna för de flesta front-enders är att förstå CSS skrivna av andra människor, eller våra tidigare jag. Så kan vi ägna mer tid på att försöka förstå befintlig kod än att lägga till awesomely-skrivet nya koden.

Frågan kommer oftast från:

  • inga kommentarer, som helst
  • over-engineering
  • ingen enda källa av sanning
  • ingen kodning/bästa praxis anses
  • eller på alla av dem ovan
Kredit: Nana Jeon

Med SEM och BIO, vi kan definitivt förbättra koden och spara andra (inklusive oss själva!) från messy, inte längre gå att underhålla koden.

BIO

Det finns många bra metoder ute för att förbättra det sätt vi skriver CSS, och från min erfarenhet, jag hittade följande tre metoder att göra upp BIO acronym fungerar väldigt bra tillsammans

  • BEM
  • ITCSS
  • OOCSS
Kredit: Nana Jeon

En hel del utvecklare/tekniker redan vet de kända tekniker, men jag skulle vilja gå igenom var och en av dem och prata om hur jag använder dessa tekniker.

BEM

BEM är mycket populär metod och det har hjälpt oss att avsevärt förbättra det sätt vi tänker om CSS och Sass/Mindre.

SD står för:

  • Blocket
  • Element
  • Modifierare
Kredit: Nana Jeon

Som det dåliga exemplet ovan visar vi överanvänder kraften av Sass/Mindre och faller in i häckande-helvetet. Men med BEM, vi börjar att ha en mycket låg CSS specificitet genom att upprätthålla de stilar i ett (eller två) nivåer av att bygga bo.

Om du har upplevt något strider kämpar högre CSS specificitet, du vet hur smärtsamt det är att komma ut en vinnare.

Gå tillbaka till vårt exempel, den HTML-kod som ser ut så här:

<div class=”o-grid”>
<div class=”o-grid__punkt o-grid__header”>

</div>
<div class=”o-grid__punkt o-grid__main”>

</div>
<div class=”o-grid__punkt o-grid__sidebar”>

</div>
<div class=”o-grid__punkt o-grid__footer”>

</div>
</div>

Exemplet består av:

  • ett block: .o-grid
  • element: .o-grid__objekt .o-grid__header, .o-grid__viktigaste, .o-grid__sidofältet .o-grid__sidfot

Eftersom BEM ger en namngivning som betonar unika klasser, vi behöver inte gå in djupt häckande som:

.o-grid {
.o-grid__item {

}
}

Istället kan vi definiera stilar med färre nivåer:

.o-grid__item {

}

Detta är den största fördelen av att BEM; sänka CSS specificitet som förbättrar hela CSS-kodning effektivitet och erfarenhet.

En fråga som jag fortfarande ser då och då även med BEM är dålig namngivning. Om du inte är tillräckligt uppmärksamma, kan du hamnar med en riktigt lång klass nam som:

/* Usch! */
.o-grid__artikel-sök-knappen-text-svg-ikonen {

}

När du skapar en klass namn, gå med centralt begrepp i BEM: din komponent är ett block och alla element inuti är individuellt ansluten till blocket.

Från vårt exempel igen, heter jag .o-grid__form i stället för .o-grid__punkt-form eftersom formen i sig är en separat komponent och behöver inte vara bundna med och vara ett barn av o-grid__artikel.

Dessutom, för att mer effektivt styra stilar, jag har lagt till en annan klass namn o-grid__header tillsammans med o-grid__objekt för att förlänga stilar. Dessutom, knappen innehåller BEM-stil klasser med OOCSS, som vi ska ta på nästa.

OOCSS

Som vi redan diskuterat, det finns många bra CSS metoder och strategier för att hjälpa oss att förbättra sättet vi skriver CSS. Dock, jag ser en hel del folk tvingar sig själva att avgöra om en metod att använda sig av gäng.

Från min erfarenhet, att kombinera metoder som faktiskt kan öka sina fördelar genom att kombinera det bästa av flera världar. Till exempel, jag har personligen funnit att BEM och OOCSS fungerar väldigt bra tillsammans.

OOCSS står för Objektorienterad CSS och man kan tänka sig för den som arbetar som Lego block:

Källa: Flickr

OOCSS skapar varje enskild del för sig och sedan bygger ihop dem för att bygga komponenter.

Från vårt exempel, jag har skapat knappar med OOCSS naming convention:

  • .c-btn
  • .c-btn–gul
  • .c-btn–blå
  • .c-btn-3d –
  • .c-btn–stor

För att göra den gula knappen sök i vårt exempel header, vi kombinera dessa klasser:

  • .c-btn
  • .c-btn–gul

Om vi vill ha 3D-knappen i main-sektionen, lägger vi i 3D-klass .c-btn-3d-och kallar det en dag.

Och för den blå knapp i sidfoten, vi kan byta den gula modifierare till blå tillsammans med den stora modifierare. Som du kan se, knappen är inte beroende på rubriken blockera ger oss större flexibilitet med hur vi ska använda och återanvända komponenter. Och, genom att göra så, kan vi konstruera knapparna utan att det påverkar andra komponenter eller mönster samtidigt som du får nytta av att enkelt förlänga nytt presentationsmaterial har, som alternativa färger och former.

Här exempel på en knapp en samling som skapats med hjälp av OOCSS att skapa varianter:

Se Pennan Moderna Knappen Samling av Ryan Yu (@iamryanyu) på CodePen.

På toppen av BEM och OOCSS, med hjälp av ITCSS kan vi ytterligare förbättra vår CSS strategi. Låt oss titta på den metod som nästa.

ITCSS

ITCSS står för Inverterad Triangel CSS och det hjälper till att organisera CSS genom att tillämpa en struktur som avgör hur specifika för att få med en särskild komponent. Lubos Kmetko har skrivit en utmärkt översikt av ITCSS som är värt att läsa.

Du kan se hur jag har lagt ITCSS att använda genom att dela upp stilar upp av grupperade nivåer av specificitet i denna Sammanfattning.

Utifrån detta exempel kan du se hur jag heter komponenter genom att lägga till en namespace för klassen. Så, till exempel, en “knapp” komponent inleds med ett “c” (.c-knappen) för att ange komponent status och hindra den från att misstas för en annan artikel. Genom att göra så, alla som arbetar med projektet vet funktion av att specifik klass och hur ändra dess egenskaper kan påverka andra områden.

Här är en visuell som illustrerar alla ITCSS nivåer:

Låt oss gå igenom varje avsnitt.

Inställningar

Inställningarna är generellt en samling av variabler som inte generera CSS, men tillämpas för klasserna. Några exempel är:

  • Bas
  • Färg
  • Typografi
  • Animation

Verktyg

Verktyg även kommer inte att ge någon CSS ännu och är vanligtvis preprocessor funktioner som hjälper till att skriva eller förlänga egenskaper på klasser:

  • Funktioner
  • Platshållare
  • Mixins
  • Media queries

Leverantörer

Säljare som är tredje part stilar som används på ett projekt. Tänker på saker som att återställa.css, normalisera.css, eller ens Foundation och Bootstrap.

Anledningen till att dessa stilar är högre upp i strukturen så att vi kan ändra dem om det behövs. Som ni kanske minns, om samma klass kallas två gånger, kaskad kommer att göra egenskaper av andra exempel, förutsatt egenskaper är exakt den samma:

.btn–stort {
stoppning: 3em;
}

/* Detta vinner */
.btn–stort {
stoppning: 5em;
}

Bara för sida notera, i Sass, kan du använda ~ för att peka på den node_modules mapp så att du kan importera stil tillgångar från källan i stället för att flytta den till dina egna kataloger.

@import ‘~moderna normalisera/modern-normalisera’;
Objekt

Objekt (namespace: o-) används för mönster, såsom layouter, där objekten är ordnade i stället inredda. Objekt klasser används på alla sidor, så om du gör några ändringar i objekt klasser, bör du vara mycket försiktig eftersom alla förändringar kommer att påverka varje sida på hela webbplatsen.

Det mest vanliga objekt klasser jag använder är:

  • .o-sida: de yttre behållare som oftast innehåller max-width: 100vw och overflow: hidden.
  • .o-viktigaste: den yttre behållaren för huvudområdet.
  • .o-behållare: den yttre behållaren för komponenter och det ger oftast en fast bredd.
  • .o-innehåll: i fall om någon ytterligare konfiguration behövs för det faktiska innehållet området.
  • .o-grid: om ett rutmönster med olika antal kolumner krävs.

Använder du några andra klasser objekt? Om så är fallet, vänligen dela med mig. 😃

Delar

Element (namespace: e-) är HTML-inbyggt element som vi skulle inte stil baserad på klass namn. Vi bör till exempel ger förvalda stilar till <a> – element i stället .länk klass.

// Gör detta för standard länk stil
en {
text-decoration: none;

&:hover {
background-color: blue;
färg: vit.
}
}

// Inte ge den förvalda länken stil till en klass
.länk {
text-decoration: none;

&:hover {
background-color: blue;
färg: vit.
}
}

Det är därför, särskilt i ett CMS som WordPress, du skulle inte vilja lägga till en klass, varje gång du vill använda en länk i innehåll. Därför ger vi ett standardformat för att <a> – elementet så utan någon klass, länken kommer fortfarande att ha snygga stilar.

Komponenter

En komponent (namespace: c-) är en liten funktion som gör upp en del av webbplatsen. Tror knappar, dragspel, reglage, modala dialoger, etc. Varje komponent är fullt fungerande av sig själv och inte förlita sig på några andra komponenter. Detta faktum bör beaktas när du namn komponenten.

Till exempel knappen i main-sektionen från exemplet ovan bör inte kallas .c-main-knappen eftersom största omfång det inuti main-sektionen och begränsar användningen av det på andra ställen, som en sidebar. Något liknande .c-btn är mycket trevligare eftersom knappen är inte längre bundna till några andra specifika delar av sidan.

Om du behöver några extra funktioner, kan du alltid förlänga fastigheter med en BEM-modifierare (kombinera krafter!) eller använd Räckvidd, som kommer upp i lite.

Mönster

En hel del utvecklare/tekniker att använda termer komponent och mönster synonymt och det är helt okej om du är mer bekväm med det. Det är bara min preferens för att separera dessa två termer.

För en allmän tumregel, jag tror på ett mönster (namespace: s-) som en kombination av komponenter men på ett sätt som är inte skalbara.

Till exempel, jag skulle kunna tänka dragspel som en komponent. Det är skalbar och kan återanvändas på egen hand, vilket innebär att den kan användas på andra delar av webbplatsen utan att göra några ändringar, även om dragspelet skulle innehålla andra komponenter såsom knappar.

Å andra sidan, huvudet, till exempel, skulle vara ett mönster, eftersom det är inte skalbar (huvudet kan inte användas i innehållet eller sidofältet) och innehåller också andra komponenter, såsom knappar, dragspel, menyer, logotyper, sök form etc.

Omfattning

Varnas, jag bara använda tillämpningsområdet om det är absolut nödvändigt. Syftet med räckvidd (namespace: s-) är att ge oss den högsta specificitet så att vi kan skriva över alla stilar för ett specifikt syfte.

Kom ihåg att Om du befinner dig med hjälp av tillämpningsområdet klass många gånger, du kan vara stilar som är alltför specifika och du bör överväga att refaktorera din CSS-strukturen.

Här är ett enkelt exempel på användning av tillämpningsområdet klass .s-hem.

.c-dragspel {
.s-hem & {
// För att ändra bakgrundsfärg specikt på hemsidan
background-color: tomat;
}
}

Som en sida noterar, exemplet ovan skulle faktiskt vara omstrukturerade genom att tillhandahålla en modifierare till dragspel (t ex, .c-dragspel–bg-tomat) istället för att använda den omfattning klass. Det skulle vara en mycket mer utbyggbar sätt att skriva och göra den mer modulär komponent.

Extra Namnområde

På toppen av namnrymder vi diskuterade ovan, det finns två mer jag använder ofta:

  • är-: detta visar tillståndet för block eller element. Vanligaste klassen .är aktiv, gillar den aktiva länken i navigationen.
  • js-: detta anger att den särskilda delen är bundna till JavaScript-händelser. Till exempel, js-menyn-klicka visar att elementet är skyldig att på händelsen.

Fibersläpp

Slutligen gör regler med .stylelint och .eslint kan avsevärt förbättra kodens kvalitet.

I frontend arbetsflöde, jag gör det inte som en rekommendation; jag gör det obligatoriskt så att inte av reglerna kommer inte få godkänt.

På detta sätt kan vi se till att kodningen kvalitet vistelser på bästa sätt och ger bättre kod till andra utvecklare, inklusive ditt framtida jag.

I Action

I detta avsnitt vill jag diskutera hur vi kan använda SEM och BIO. Jag har gjort en enkel, praktiskt exempel för att få oss igång:

Se Pennan genom att iamryanyu (@iamryanyu) på CodePen.

Den huvudsakliga träningen med exemplet är att bygga ett dragspel som kan användas som:

  • ett vanligt dragspel men med olika färgteman i main-sektionen
  • en-menyn i sidoraden
  • ett block som visar sociala medier ikoner i sidfoten

Vad vi uppnår är en komponent som är:

  • Skalbara: som det kan läggas i någon del av sidan utan att någon kodning förändringar
  • Extensible: som det kan fungera olika funktioner med de centrala funktionerna oförändrad
  • Lätt att underhålla: som den är organiserad på ett sätt som är meningsfullt

För att uppnå SEM, BIO har använts bland annat:

  • BEM: .c-dragspel som ett block och sina barn som element, som också används modifierare, till exempel .c-dragspel-ljus och .c-dragspel–mörk
  • ITCSS: beställning/sortering av SASS filer hanterar CSS specificitet ganska bra. Till exempel, dragspel knapp i sidomenyn innehåller class=”c-dragspel__utlösa p-sidebar-meny__knappen” som mönster (p-) skriver över den komponent (c-) med några frågor.
  • OOCSS: dragspel är konstruerad med flera klasser, till exempel class=”c-dragspel c-dragspel–mörka c-dragspel–enda” som skapar en mörk tema med att öppna en enda panel bara varje gång.

Slutliga tankar

Jag har använt den här metoden för nästan alla mina projekt, inklusive universiteten, myndigheter, kommersiella återförsäljare, och många andra webbplatser. I varje fall, jag har framgångsrikt levererat alla projekt till kunder (nästan inga frågor under klienten godkännas och levereras i tid); detta tillvägagångssätt har fungerat för mig väldigt bra så här långt och jag tror att det kan för dig också.

Som sagt, teknik alltid ändra (särskilt på fronten) och jag är mer än glad att få höra och diskutera någon av dina idéer/metoder/strategier som fungerat för dig. Låt mig veta i kommentarerna!

Jetpack WordPress plugin som körs på denna webbplats, driver inte bara relaterade inlägg nedan, men säkerhet och backup, Wiki-stöd, sök på sajten, kommentera form, sociala nätverk, och mycket mer!