Du har kodat ett tag nu och vet din väg runt en CSS-fil. Du är verkligen ingen mästare, men med tillräckligt med fiddling kan du komma dit du vill gå. Du undrar dock om du någonsin kommer förbi den punkten där CSS är en sådan kamp. Kommer du någonsin att kunna bryta ut en komplex layout utan att till slut använda sig av prov och fel för att se vad som fungerar och vad som inte gör?
Den goda nyheten är att du verkligen kan komma över den frustrerande punkten där du känner till tillräckligt med CSS för att koda en webbplats men saknar den solida grunden som låter dig koda utan irritation att inte exakt förstå hur du ska komma dit du är " åter, och den här punkten är mycket närmare än du tror. Jag föreslår att det finns fem ämnen som drastiskt ökar din förståelse för CSS. Tillbringa lite tid på att läsa om var och en under de närmaste tjugofyra timmarna och du ändrar hur du kodar för alltid.
1. Wrap Your Mind runt positioneringskontexten
Om du verkligen vill ha en gedigen förståelse för hur du använder CSS för att flytta HTML-element till var du vill att de ska gå, måste du absolut ta tag i positioneringskontexten. Och jag menar inte bara en avslappnad förståelse, jag menar en djup kännedom om deras skillnader, beteenden, quirks, etc.
Det finns faktiskt fem lägesvärden som du borde förstå. Om du inte kan namnge alla fem utan att titta på dem, är du definitivt en kandidat för den här utbildningen. Här är de: statiska, fasta, relativa, absoluta och ärvda.
Du måste känna till och förstå alla fem, men de stora två som verkligen förändrar hur du kodar är absolut och relativ positionering. Att lära sig att använda dessa två positioneringskontext separat, och sedan hoppa in i hur de fungerar tillsammans, kommer att förändra det grundläggande sättet du ser på CSS-layout, lovar jag. Det är en uppenbarelse som gör ditt jobb oändligt lättare.
Resurser för att få dig där
Lowdown på Absolut vs Relativ Positionering
Detta är mitt djupa dykk i ämnet positioneringskontext. Jag kortfattat nämna och förklara alla fem men fokusera verkligen på de stora två: hur de skiljer sig, hur de är olika och hur de fungerar tillsammans. Läs igenom det här stycket och du kommer vara bra på väg till huvudvärkfri CSS-positionering.
CSS-positionering 101
Denna bit kommer från den ärafulla En lista från varandra bloggen så genast vet du att det kommer att bli både grundligt och otroligt pedagogiskt. Artikeln publicerades 2010, men informationen är fortfarande helt relevant och den fungerar som en bra introduktion till alla fem positioneringskontexten. Det är inte en mycket visuell artikel men det har många enkla kodexempel för att underlätta dig för varje koncept.
Lär CSS-positionering i tio steg
Detta är en fantastiskt kort översikt över de olika positioneringskontexten. I stället för en långvarig artikel presenterar den här sidan en liten låda med tio flikar. Varje flik har en liten kodbit och en mening eller två som förklarar koden. Av till höger är en liveexempellayout som uppdateras med varje flik. Det här formatet är fantastiskt för att visuellt koppla kodfragment till de layouter de producerar och jag rekommenderar starkt att det ser ut om du kämpar med mestadels textförklaringar som den ovanstående från ALA.
2. Master Floats
När du först lär dig CSS verkar flottor som ett av de mest skruvade layoutsystemen tänkbara. När du lär dig att använda dem på en grundläggande nivå måste du lära dig allt om hur föräldrar som bara innehåller flytande barn har en kollapsad höjd, vilket leder till sjutiofyra olika sätt att lösa problemet genom clearfixes och överflyttningsmanipulationer.
Lyckligtvis, i det långa loppet, blir du van vid begreppen bakom flottor och de kan till och med bli så lätta att använda att du inte ger dem mycket tankar alls. Det enda som står mellan dig och det målet är en solid artikel eller två som verkligen gräver i och förklarar grundligt flytande beteende och tekniker från grunden.
Resurser för att få dig där
Allt du aldrig visste om CSS Floats
I den här artikeln täcker jag nästan hela spektret av ämnen rörande flottor i CSS. Det börjar med en grundläggande diskussion om vad floats är och hur de fungerar. Efter detta talar jag om hur flottor påverkar lådorna av de involverade elementen, hur flottorna blir konstiga med element i varierande höjder, de nio reglerna som täcker flytande beteende och förstås den kollapsande höjden debacle och hur man fixar den.
Allt om flottor
Chris Coyier har alltid varit min favorit författare när det gäller CSS-relaterade ämnen och hans introduktion till flottor gör ingen besvikelse. Om du letar efter en kort men enkel diskussion om hur man arbetar med flottor har du tagit den här delen. Jag gillar särskilt de enkla, attraktiva illustrationerna som används i hela artikeln.
Mysteriet av CSS Float Property
Medan Chris Coyiers bitar ofta är korta och till sin del är innehållet på Smashing Magazine vanligtvis ganska expansivt med massor av exempel och relevant diskussion. I den här artikeln introduceras begreppet floats, berättar allt om hur man använder och rensar dem och sedan lanserar i en diskussion om var du vanligtvis ser floats som används i verkliga webbplatser. Om du behöver se teorin kommer levande, är den här för dig.
3. Känn dina väljare
En av nycklarna till att skriva bra CSS är att få en stark förståelse för vilka CSS-väljare du har tillgång till, hur de fungerar och hur mycket de stöds på olika webbläsare. Det låter som ett tillräckligt enkelt ämne, men i verkligheten är CSS-markörernas värld ganska komplex.
Det finns massor av olika intressanta saker att lära dig om här, från att använda attributvärdesväljare och rikta sökord i klassnamn till hur universellväljaren kan vara till hjälp för att felsöka din kod. Även om du tror att du personligen kan ta dig av utan att förstå en massa fina selektörer, är det sant att andra kodare använder dessa saker varje dag och du måste kunna förstå vad du ser när du träffar visningskälla!
Resurser för att få dig där
CSS Selectors: Bara de knepiga bitarna
Det här är en rolig artikel som tar en titt framför allt på de mer komplicerade aspekterna av CSS-väljare. Jag hoppa över marknivåerna och hoppa rakt in i hur man diskuterar begreppet DOM för att rikta in olika aspekter av ditt dokument med CSS. Du lär dig allt om att välja barn och syskon, hur man ska kedja väljare och mycket mer.
De 30 CSS Selectors du måste memorera
Jeffrey Way är en web dev rockstar och artiklar som detta bevisa varför. Denna Nettuts + -artikel täcker en stor mängd CSS-väljare i ett enkelt och kort format som lägger stor vikt vid webbläsarsupport. Förvånansvärt nog, kodade Jeff även upp exemplar på exemplar för var och en av de trettio selektorerna.
CSS Attribut Selectors: Hur och varför ska du använda dem
Attributvärdesväljare är en av de mest kraftfulla delarna av CSS-väljare, och CSS3 ökar verkligen den strömmen. Du kommer inte att tro hur mångsidig dina selektörer kan bli med ett lite attributvärde magi. Efter att ha läst den här artikeln kommer du att slingra runt fraser som "godtycklig substring attributvärdesväljare"? som ett proffs.
4. Lär dig DRY kodningskoncept
? Repetera inte dig själv? Denna enkla fras har drastiska konsekvenser när det gäller kodning. När du verkligen dyker in i DRY-kodningspraxis, är resultatet renare kod, mindre arbete och ett vackert nytt arbetsflöde som är lika bemyndigande eftersom det är platt ut fantastiskt.
Till skillnad från de andra ämnena ovan, som är ganska smala, är det här ett ganska stort ämne som täcker alla slags olika metoder, tekniker och idéer. Intressant nog, en av de saker som nyligen har fått mitt sinne inriktat på DRY-kodningspraxis är användningen av CSS-förprocessorer.
Även om många hävdar att preprocessorer leder till dålig kodning, är verkligheten motsatt. Självklart hjälper förprocessorerna sig själva att undvika manuell upprepning, men det går utöver det. Att undersöka produktionen av verktyg som LESS och SASS och målen för språken i allmänhet har faktiskt lett till att jag skrev bättre ren CSS! När du förstår begrepp som @extend i Sass kan du inte låta bli att tänka på konsekvenserna när du kodar med bara CSS.
Resurser för att få dig där
DRY CSS: Repetera inte din CSS
I denna artikel introducerar Steven Bradley dig till ämnet DRY CSS och täcker några av dess huvudprinciper och mål. Han kokar träningen ner till tre enkla idéer och visar dig hur man implementerar dessa idéer i ett riktigt arbetsflöde. Begreppen lånas i stor utsträckning från en Jeremy Clarke-presentation som täcker samma ämne.
En introduktion till objektorienterad CSS (OOCSS)
Som jag nämnde tidigare är de idéer som är inneboende i DRY CSS-rörelsen ganska långtgående och direkt relaterade till koncept i andra konstruktioner. OOCS är en alltmer populär metod som syftar till att hjälpa dig skapa snabbare, effektivare stilark med överlägsen organisation och mindre repetition. Det finns två huvudprinciper på jobbet i OOCS: separation av struktur från hud och separation av behållare och innehåll. Denna artikel från Smashing Magazine kommer att gå igenom de grundläggande idéerna och hjälpa dig att tillämpa dem på ditt eget arbete.
En introduktion till SMACSS riktlinjer för att skriva CSS
Kom ihåg Steven Bradley från den första artikeln om DRY CSS? Han skrev också det här stycket, vilket förklarar ett projekt som liknar men skiljer sig från OOCS: SMACSS (ett projekt från Jonathan Snook). Som med OOCSS har SMACSS två huvudmål. Det första är att öka det semantiska värdet av en sektion av HTML och innehåll, och den andra är att minska förväntan på en specifik HTML-struktur. Denna artikel förklarar båda målen i detalj och ger användbara kodexempel så att du kan se SMACSS i aktion.
5. Känn ditt webbläsarstöd
Den femte och sista nyckeln till att förbättra din CSS är att veta vad som fungerar där. CSS3 är alltför lockande för de flesta av oss att ignorera, men den svåra sanningen är att en hel massa det inte fungerar i vissa webbläsare (av vissa webbläsare? Jag förstår självklart IE).
Den stora hemligheten som nybörjare webbutvecklare behöver komma in i sina huvuden är inte att de behöver memorera varje enskild CSS-funktion och hur varje webbläsare som är känd för mannen hanterar den, istället det att det finns helt fantastiska resurser tillgängliga för dig som ger dig den här informationen Fritt, du behöver bara veta var du ska titta.
Resurser för att få dig där
Nailing Browser Support i CSS3 och HTML5: ovärderliga resurser att använda idag
I den här artikeln presenterar jag dig på de relativt få webbplatser som jag har bokmärkt för att kontrollera webbläsarsupport. Dessa resurser är fantastiska, visuella och ger dig den information du behöver i en jiffy så att du kan komma tillbaka till kodning. Ta en titt för att se vad de är!
Browser Support för CSS3: Vad är den nuvarande statusen?
Den här artikeln skrevs över ett år sedan, så den? Aktuella statusen? Stycket är argumenterbart, men inte tillräckligt har ändrats i denna tid för att göra informationen i denna artikel föråldrad. Det fungerar som en otroligt bra översikt över olika CSS3 egenskaper, uppdelad i sektioner baserade på vad som fungerar överallt och vad du behöver se upp för. Det tar bara några minuter att gå igenom och det är väl värt att läsa.
Betydelsen av Cross Browser-kompatibilitet: Tips och resurser
Om du är nybörjare till CSS och behöver en grundläggande introduktion till temat för webbläsarkompatibilitet och varför det är viktigt, har denna Noupe artikel täckt dig. Mer än bara sälja dig på tanken på kompatibilitet, det listar en massa stora resurser som du kan använda för att säkerställa maximal kompatibilitet. Av särskilt intresse är listan över verktyg som hjälper dig att testa din webbplats i olika webbläsare.
Jag ska läsa allt detta om 24 timmar?
Jag har presenterat dig med fem helt kritiska ämnen att studera och inte mindre än femton artiklar där du kan lära dig de principer du behöver veta. Det här är bra och bra men i min titel lovade jag att du skulle bli bättre på en enda dag och inte alla har tid att sitta och läsa femton långa artiklar!
Den goda nyheten är att jag gav dig tre artiklar om varje ämne så att du skulle ha lite variation att välja mellan. Jag förklarade innehållet i var och en så att du kan välja den som bäst passar dina behov. Kom ihåg att välja artiklarna att läsa inte baserat på vad du vet, men vad du inte vet. Gör det som ett mål att fylla luckorna i din kunskap.
Mitt förslag är att bläddra igenom innehållet ovan och välja fem artiklar att läsa (en från varje sektion). Även det är mycket att göra på en dag men de flesta är inte för mycket mer än tusen ord eller så, många är mindre. Jag är övertygad om att du kan dra av den. Om du inte kan, inget problem. Ändra ditt mål att förbättra dina CSS-färdigheter på en vecka och läs en av dina fem valda artiklar varje dag de närmaste fem dagarna. Jag garanterar att nästa vecka kommer du att vara mycket bättre på att skriva tydlig, kortfattad, kompatibel och återanvändbar CSS.
Vilka andra begrepp rekommenderar du?
Nu när du har läst mitt topp fem ämnen som människor borstar på för att förbättra sina CSS-färdigheter, vill jag höra från dig. Vilka andra ämnen tycker du CSS-kodare brukar kämpa med och vilka resurser rekommenderar du för någon som vill lära sig mer?
Lager bilder gett upphov till BigStock