Utveckla effektiv, strömlinjeformad CSS
CSS kan jämföras med en skulptörs verktygssats; som skulptörer på jobbet, använder vi designers CSS för att skapa strukturerad layout av webbplatser.
Under åren har denna process blivit mer organiserad; regler har införts för att skapa bästa metoder för kodning.
I den här artikeln tar vi en titt på några idéer du kan använda när du skriver stilark för att påskynda din kod.
Effektiv CSS är lätt att hantera och lätt att läsa och kan vara en resurs för webbdesigners. Att organisera är ett stort steg, men med CSS kan det vara lite mer komplicerat än det.
När du läser denna artikel, behåll dina egna preferenser i åtanke; Det bästa råd du kan få från någon utvecklare är att hitta din egen arbetssätt. Kombinera några av teknikerna här med egna metoder för att få mest nytta.
Varför bry sig om att effektivisera CSS?
Många designers förvirrar front-end och back-end språk när man pratar om parsing-kod. CSS och HTML är front-end design språk som används för att formatera och utforma element på en webbplats. Filer laddas ner och analyseras av besökarens webbläsare, vilket innebär att front-end-koden har en väsentlig laddningstid.
Kod som laddas ner och analyseras av webbläsaren tar tid att läsa och beräkna, precis som kod som skrivs i back-end-språk (som PHP eller Ruby). Strömlinjad CSS kan till stor nytta för en webbplats eftersom den kan förkorta laddningstider och påskynda sidelementstrukturering.
Fördelarna kanske inte är uppenbara med dagens höghastighetsanslutningar och avancerade operativsystem. Du kanske vill titta på din webbplats i en mobil webbläsare för att jämföra belastningstider och se hur webbplatsen laddas.
När CSS kodas effektivt bör du se formuläret och stilen på webbplatselementen som de behandlas. Det kan se annorlunda ut från webbläsaren till webbläsaren, men det händer fortfarande. Ju mer du testar din webbplats kod, desto mer ser du den.
Håll din kod standardiserad och enkel. Om du uppdaterar din blogg eller personlig webbplats några månader efter den första utvecklingen, är det lättare att klara av CSS-stilar som du är bekant med än att hantera nya. Anpassa till etablerade standarder hjälper på lång sikt.
Hur man arbetar med effektiv kod
För att börja kodningsstilar med största effektivitet måste du anta några nya idéer. Dessa är grundläggande CSS-tekniker som används idag av toppklassiga webbplatser och apputvecklare.
Håll din kod enkel
Detta kan lätt förbises. När du kartlägger en uppsättning data för dina stilar, behåll det enkelt. Skapa datasatser i en kolumnstack om du behöver.
Börja med att skapa en lista över olika avsnitt som du kan arbeta med i dina stilar. Du kan inkludera text, formulär, layoutfält, rubriker, sidfot och allt annat du kan behöva. För att verkligen bli organiserade kan du bryta ner det i några kända stilar, som en id eller class för navigeringslänkar.
Det här första steget hjälper till att skapa en blueprint för din webbplats med vanliga ord innan du går in på något stilsprog. Efteråt sitter ned för att skriva kod bli mycket enklare; Att ha resurslistan framför dig hjälper dig att hälla ut kod med en nästan övermänsklig takt.
Håll block av kod avgränsad och gles
Det går en pågående debatt om hur CSS-kod ska skrivas. När jag började började jag använda blocknotering eftersom det var allt jag någonsin hade sett. Men enstaka notering är mycket snabbare när det gäller att tolka text och göra den läsbar.
Jag gör inte ett fall för att ignorera CSS-blocket-långt ifrån det. När du har att göra med ett viktigt element eller id som rymmer sex eller sju stora egenskaper, blir det lättare att hålla det i blockerad form. Du kommer att isolera viktiga delar av din stil, vilket gör dem enklare att hitta på ett ögonblick.
Att läsa långa stilar i blocknotering är också lättare eftersom de flesta textredigerare har långa linjer och läsning av värde för par kan bli förvirrande när du har 10 eller fler att gå igenom. Som webbdesigner måste du ringa på hur man rymmer CSS-koden. Håll effektivitet i åtanke och använd din bästa bedömning.
Arbetar med andra utvecklare
Om du är en professionell webbdesigner eller strävar efter att vara en, är chansen att du kommer att arbeta med ett lag förr eller senare. Detta kan vara en välsignelse eller en förbannelse, beroende på laget.
Designers är ofta ovilliga att göra stora förändringar i sitt arbete. CSS-koden är lite annorlunda eftersom du försöker skapa en vacker layout med bara egenskapsvärden, och filer kan bli röriga när de passeras mellan några händer. Så håll dig organiserad.
Kommentarer är en stor hjälp. Om rader eller block av kod kan förvirra eller vilseleda andra kommer kommentarer att spara timmar. Förklara allt du lägger i stilarket så elegant som möjligt.
Se till att inga dubblerade eller bifogade stilar skrivs över. Föreställ dig att h1 till h4 rubriker är uppbyggda högt upp i ett CSS-dokument, men då ändras en del kod nedåt och ändrar sina teckensnitt. Detta kan vara oerhört förvirrande för någon som inte skrev koden och nu måste gå igenom och fixa buggen.
Kommunikation är också kritisk. Du kan skriva den mest effektiva koden runt, men en brist på kommunikation kommer att döma ditt lag. Fokusera på uppgiften till hands och arbeta med de kreativa idéerna som produceras kollektivt av laget (inte bara din egen).
Håll koll på separata CSS-dokument
Ett annat sätt att hålla koden ren och organiserad är att hålla stiltyperna separata. Detta fungerar bra för stora webbplatser där det är orealistiskt att hålla alla stilar i ett enda dokument.
Facebook är ett bra exempel. Det har sannolikt många olika stilar för alla sina olika sidor: profil, sökning, registrering, foton etc. Om stilarna alla konsoliderades i en fil vill jag inte vara den kille som måste sortera igenom koden bara för att fixa en enkel bugg.
Facebook får mycket mer trafik än din webbplats, men principerna är desamma. Om organisationen är en oro kan separata stilark gå långt. Webbdesigners organiserar ofta kod baserat på aspekten av dokumentet som det strukturerar (t.ex. layout.css , text.css , forms.css ).
Alla stilar behöver inte laddas på varje sida. Och här ligger nytta: metoden möjliggör större anpassning när du bygger din webbplats. Du kommer att skära ner på analyseringstiden enormt bara genom att skapa separata visningar och stilar.
Testa support för IE
Webbutvecklare har alltid måttat Internet Explorer som skurk, särskilt med CSS. Lyckligtvis kan du använda villkorliga kommentarer (som ser ut som vanliga kommentarer till de flesta webbläsare) till HTML.
Du kan använda dessa för att tillämpa stilar i Internet Explorer. Kolla in villkorliga kommentarer om du inte känner till dem. De kan visa sig ovärderliga när CSS-egenskaper inte fungerar rätt och du behöver ett alternativ.
Med frisläppandet av Internet Explorer 9 Beta , vi blir lite närmare en enhetlig Internet-upplevelse. Det enda problemet är antalet personer som fortfarande kör webbläsare lika gamla som IE6 och IE7, som har allvarliga processbuller (på grund av felaktiga återgivningsmotorer) och ibland kräver externa format. Tack och lov, support har förbättrats, och Microsoft verkar vara att vända saker runt.
Lägga till en innehållsförteckning
Det här steget är valfritt, men jag tycker att det fungerar underverk för min stilark. Du kan lagra tabellen utanför själva CSS-dokumentet, men jag har funnit att detta är något motproduktivt, särskilt för att lägga till kommentarer inline är så enkelt.
De viktigaste orsakerna till att lägga innehållsförteckning i dina stilar är att det underlättar åtkomst och effektiviserar redigeringsprocessen. Sätt markörer i början av ditt dokument för att separera koden i logiska indelningar.
Att skapa egna nycklar är ett bra tillvägagångssätt. Om du till exempel planerar att dela upp ditt bord i enlighet med huvudområdorna i dokumentet (layout, typsnitt, rubrik, navigering etc.) kan du testa sektionerna med unika tecken.
Du kan använda =!layout och =!font för att avgränsa layout och typsnitt. Du kommer nog inte att köra in i de exakta sekvenserna av tecken någonstans i koden, så att lägga dem till både ditt bord och början på varje kommentar avsnitt bör vara säker. Använd sedan sökfunktionen i textredigeraren för att hoppa över till den sektion du vill ha.
Det här är också en bra strategi för projekt där många människor kommer att titta på koden. Det håller allt organiserat och tillgängligt.
Det finns många sätt att optimera koden och göra den mer effektiv, och dessa tips är en bra start. CSS utvecklas, och många nya idéer om det byggs upp.
Du behöver passion och engagemang för att göra det i designbranschen. Om du kan hålla fast vid din passion för digital design, bör det inte vara svårt att följa upp CSS bästa praxis. Att nå ut till andra i det här stora globala samhället av webbdesigners kan vara en stor hjälp; branschexperter är vanligtvis glada att dela med sig av sina tekniker och innovationer.
Detta inlägg skrevs uteslutande för Webdesigner Depot av Jake Rocheleau , en passionerad webbdesigner och social media entusiast. Jake älskar att läsa och skriva om de senaste digitala och internettrenderna och nätverkandet med designgemenskapen. För att höra mer om sitt arbete, hitta honom på Twitter @ jakerocheleau .
Vilka är dina metoder för att effektivisera CSS? Några förslag till nybörjare CSS-utvecklare? Vilka nya funktioner eller ytterligare support skulle du vilja se i framtida iterationer av CSS?