Upprepa inte dig själv (DRY). Det är ett enkelt koncept med möjligheten att helt ändra hur du skriver kod. Om jag ser tillbaka till mina tidiga dagar med CSS men tror jag inte att konceptet betydde mycket för mig. Visst, okej, upprepa mig inte, tack för råd. Hur översätter det till gällande råd dock?
Idag ska vi titta på de väsentliga kärnkoncepten för hur man tänker på den CSS du har skrivit genom att trimma fettet och minska redundansen. Resultatet blir smalare CSS som är lättare att författare och underhålla.
Var jag tror du är
Den här artikeln är inte för den kille som spenderar sina dagar med att trolla genom webbutvecklingsbloggar för en chans att lämna kommentarer och visa hur mycket mer han vet att alla andra. Om du redan är ett CSS-geni, skriv en bok.
Istället skriver jag detta för massorna av utvecklare som äntligen börjar hänga med den här CSS-saken. Du har stylat webbplatser för ett år, kanske två och du är redo att ta ett steg bortom hur man skriver effektiv kod och lär sig hur man skriver effektiv kod.
? Du är redo att ta ett steg bortom hur man skriver effektiv kod och lär sig hur man skriver effektiv kod.?Precis som jag vid denna tidpunkt i min karriär har du hört jargongen många gånger men har ännu inte upplevt det? Klicka? där plötsligt skriver effektiv CSS är meningsfullt. Förhoppningsvis hittar vi det klicket idag.
Sass @extend
Freak inte ut. Vi ska prata om en förprocessor. Oroa mig inte, jag kommer inte att kräva att du använder en eller gör hela denna del i en Sass-handledning snarare än en CSS-handledning. Vi ska lära oss att skriva vanligt gammalt CSS på ett mer effektivt sätt.
Freak inte ut. Vi ska prata om en förprocessor.?Med det sagt, Sass, för alla dess komplexiteter, använder faktiskt väljararvet på ett mycket enklare sätt för att sätta upp ditt sinne än CSS. Det är en väldigt okomplicerad och linjär process som gör att du inte kan upprepa det självklart. Låt oss ta en titt.
Tre lådor
För att se hur det fungerar kan du föreställa dig att du hade tre mycket liknande men fortfarande olika klasser. Här är ett exempel med klassen? Rutan ,? ?stor låda,? och? småbox? (Förhoppningsvis är dina klassnamn lite mer specifika).
Som du kan se behöver alla tre rutor samma grundläggande stilar, men storleken för varje är annorlunda, så vi behöver faktiskt tre separata klasser. Ändå är all denna redundans inte bra.
Så hur torkar vi det här? Det är där Sass @extend-funktionen kommer in. Kolla in det:
Se vad som hände här? Även om du inte vet något om Sass, är den här koden ganska lätt att förstå. I huvudsak, snarare än att skriva samma egenskaper om och om igen med samma värden, kan vi använda @extend för att säga? Hej, ta bara koden från lådans klass.? Vi fortsätter sedan och definierar bara de egenskaper som behöver ändras.
Den resulterande koden är kortare och mer kortfattad medan den inte offrar läsbarheten. Tyvärr är detta Sass och funktionen @extend finns inte i vanlig gammal CSS.
Lära sig från Sass Output
Så vad var meningen med den stora Sass-lektionen om vi inte kan använda @extend i CSS? Saken att komma ihåg är att den ultimata produkten av Sass, LESS och någon annan förbehandlare är vanlig Jane CSS. Så om Sass verkligen jobbar med någon magi i den faktiska produktionen, så borde vi kunna upptäcka det.
Låt oss se hur det hanteras att vända de @extends till CSS:
A ha! Denna kod är mycket mer koncis än vårt ursprungliga koncept och ändå är det fortfarande rent CSS. Funktionen @extend är faktiskt tillräckligt smart för att utföra lutande CSS genom att använda grupperade selektorer, som skiljs åt av kommatecken.
Genom @extend, pekade vi Sass på uppsägningarna i vår kod och det var allt i en enda regel. Därefter definierade vi de andra klasserna med endast den kod som behövdes differentieras.
Hoppa Sass
Den stora lektionen att lära dig här är att du inte behöver en förbehandlare för att göra allt detta arbete för dig. Du kan hoppa över Sass helt och helt enkelt skriva ren, kortfattad kod i första hand (även om jag personligen fortfarande tycker att Sass är biet knän). Det kan inte vara så intuitivt, men när du får hänga av att få redundans, blir det en ganska lätt uppgift.
Den viktiga lektionen för mig var att jag inte nödvändigtvis inser att jag kodar slarvigt när jag experimenterar med olika idéer i min kod, och det är okej! Kodning så här från början är något som kommer med erfarenhet. Under tiden måste du bara vara säker på att få en enkel princip i ditt huvud: du är inte klar helt enkelt för att allt fungerar!
? Få en enkel princip i ditt huvud: du är inte klar helt enkelt för att allt fungerar !?Du kan fitta runt i timmar med en design eller funky layout, och när allt äntligen hamnar på plats, höjer du en lättnadssug och fortsätter med livet. Men du är inte klar! Steget som du borde ta nästa är att undersöka all den kod som du skrev i frustration och ta reda på hur du förenklar det.
Ett verkligt exempel
För att se hur denna process ser ut, låt oss ta en titt på ett verkligt exempel som jag kodade för en tidigare handledning. I grund och botten var effekten som jag gick för en stapel kort.
För att dra av det skapade jag ett element med viss grundläggande styling, sedan använd: före och: efter att duplicera elementet. Resultatet var en stapel med tre kort från en enda klass. Här är den del av koden som resulterade:
Jag stöter på detta problem hela tiden när du använder: före och: efter. Jag bygger varje element individuellt, ta ett steg tillbaka, så inse att jag i stort sett bara har skrivit samma kod tre olika tider!
Allt vi behöver göra för att rensa upp detta är något som alla skolbarn kan göra: upptäck repetitionen. I koden ovan har varje kort samma höjd, bredd, skugga, gradient och kantradio. All denna kod ska skrivas en gång. Vi kan gruppera det här tillsammans som så:
Detta tar hand om egenskaperna och värdena som upprepas över alla tre korten, men det finns också en viss redundans som bara finns mellan pseudoelementen. Låt oss ta hand om det här nästa.
Nu när vi har grupperat allt detta innehåll tillsammans kan vi ta bort det från andra avsnitt där det upprepades. Här är det kompletta, trimmade koden:
Som du kan se har vi klippt ut nästan tjugo rader av kod i ett litet exempel! Tänk på hur mycket effekt dessa principer har på hela en webbplats.
Lätt underhåll
För ofta presenteras principer som de vi lär oss idag som regler som ska följas helt enkelt för att det är så som du skall gör det. För de flesta är detta inte ett övertygande argument. Vem bryr sig om vanliga metoder och det större bra? Vad får jag ut av det?
? Du sparar dig mycket tid och problem genom att använda dessa tekniker.?Den goda nyheten här är att smidigare CSS är väldigt lättare att upprätthålla och siktas genom på lång sikt. Du sparar dig mycket tid och problem genom att använda dessa tekniker. Tänk dig att du hade skrivit originalkoden från exemplet ovan och bestämde dig för att du ville ändra gradientfärgerna. Du måste gå igenom och uppdatera arton kodrader för den här enkla förändringen!
Föreställ dig nu att du var tvungen att göra detsamma på vårt korta exempel, här behöver du bara uppdatera sex kodrader. Granted, gradient syntax och webbläsare prefix situationen suger fortfarande tungt, men sex är bättre än arton.
Ompröva din kodstruktur
Innan vi lägger upp det här är det värt att diskutera att det finns massor av sätt att göra din CSS smalare. Detta är en bred kategori av diskussion som definitivt inte är begränsad till ovanstående tekniker.
Till exempel har många kodare utvecklat system där du avsiktligt skiljer olika typer av kod om din CSS i effektivitets namn. Ett sätt att göra detta i vår ursprungliga låda exempel kan vara att skilja den godtyckliga visuella stilen från strukturella CSS. Efter denna rutt skulle vår kod se mer ut så här:
Här har vi utvecklat en bas? klass som skulle tillämpas på flera HTML-element, var och en skulle då också parras med en strukturell klass som definierar form, positionering, stapelordning etc. i rutan. Något som helst som inte är extra ögonsocker.
Självfallet kommer avvägningen här att bli en liten extra markering. Du kommer att upptäcka att kodarna är oerhört olika beroende på huruvida det är acceptabelt att lägga till en enda karaktär extra markup i namnet effektivare CSS.
Populära tankskolor
För närvarande finns det två väldigt populära idéer eller metoder för att ompröva hur vi strukturerar våra stylesheets: OOCSS (Object Oriented CSS) och SMACSS (Scalable and Modular Architecture for CSS).
Även om de är ganska tydliga, är dessa metoder ganska konceptuellt lika och båda försöker hjälpa dig att skapa mer effektiv, underhållbar och till och med återanvändbar CSS. Jag rekommenderar starkt att du ger dig en närmare titt för att se vad du tycker.
Hur skriver du Lean CSS?
I exemplen ovan lärde vi oss allt om hur Sass använder en magisk funktion som heter @extend för att hjälpa dig att skriva smidigare kod med mycket liten ansträngning och hur vi kan använda principerna på jobbet i den funktionen för att utföra dessa prestationer med vanlig gammal CSS. Vi diskuterade också kortfattat tanken på att helt omvärdera din kodstruktur för att skapa något som är mer modulärt och underhållbart.
Lämna en kommentar nedan och låt oss veta vad du tycker om dessa metoder. Använder du Sass? Hur ofta grupperar du väljare för att minska redundans? Vad tycker du om OOCSS och SMACSS? Vilket är bättre?