5 trinn for å forbedre din CSS-kunnskap drastisk på 24 timer
Du har kodet en stund nå og kjenner deg rundt i en CSS-fil. Du er absolutt ingen herre, men med nok fikling kan du komme dit du vil. Du lurer på om du noen gang kommer forbi det punktet der CSS er en slik kamp. Vil du noen gang være i stand til å busse ut et komplekst oppsett uten å til slutt ty til prøving og feiling for å se hva som fungerer og hva som ikke fungerer?
Den gode nyheten er at du faktisk kan komme forbi det frustrerende punktet der du vet nok CSS til å kode et nettsted, men mangler det solide grunnlaget som lar deg kode uten irritasjonen over å ikke helt forstå hvordan du kommer dit du kommer kommer, og dette punktet er mye nærmere enn du tror. Jeg foreslår at det er fem temaer som drastisk vil øke din forståelse av CSS. Bruk litt tid på å lese om hver de neste tjuefire timene, og du vil endre måten du koder for alltid.
Utforsk Envato Elements
1. Pakk tankene rundt posisjoneringskontekster
Hvis du virkelig vil ha en solid forståelse av hvordan du bruker CSS for å flytte HTML-elementer dit du vil at de skal gå, må du absolutt få et grep om posisjoneringskontekster. Og jeg mener ikke bare en tilfeldig forståelse, jeg mener en dyp kunnskap om deres forskjeller, oppførsel, quirks osv.
Det er faktisk fem posisjonsverdier du bør forstå. Hvis du ikke kan navngi alle fem uten å slå dem opp, er du definitivt en førstekandidat for denne biten utdanning. Her er de: statiske, faste, relative, absolutte og arver.
Du må vite og forstå alle fem, men de to store som virkelig vil endre måten du koder på, er absolutt og relativ posisjonering. Å lære å utøve disse to posisjoneringskontekstene hver for seg, og så hoppe inn i hvordan de fungerer sammen, vil fundamentalt endre måten du ser på CSS-layout, lover jeg. Det er en åpenbaring som vil gjøre jobben din uendelig mye lettere.
Ressurser for å komme deg dit
Lowdown på absolutt vs. relativ posisjonering
Dette er mitt dype dykk i emnet for posisjoneringskontekst. Jeg nevner og forklarer alle fem kort, men fokuserer virkelig på de to store: hvordan de er forskjellige, hvordan de er forskjellige og hvordan de jobber sammen. Les gjennom dette stykket så er du godt på vei til hodepinefri CSS-posisjonering.
CSS-posisjonering 101
Dette stykket kommer fra den ærverdige A List Apart- bloggen, så med en gang vet du at den kommer til å være både grundig og utrolig lærerik. Artikkelen ble publisert tilbake i 2010, men informasjonen er fremdeles perfekt relevant, og den fungerer som en flott introduksjon til alle de fem posisjoneringskontekstene. Det er ikke en veldig visuell artikkel, men den har mange enkle kodeeksempler for å lette deg inn i hvert konsept.
Lær CSS-posisjonering i ti trinn
Dette er en fantastisk kort oversikt over de forskjellige posisjoneringskontekstene. I stedet for en langviklet artikkel, presenterer denne siden en liten boks med ti faner. Hver fane har et lite kodebit og en setning eller to som forklarer koden. Av til høyre er et liveeksempeloppsett som oppdateres med hver fane. Dette formatet er fantastisk for å visuelt koble kodebiter til oppsettene de produserer, og jeg anbefaler at du ser det hvis du sliter med det meste tekstforklaringer som det ovenfor fra ALA.
2. Master Floats
Når du først lærer CSS, virker flottører som et av de mest skrudd opp layout-systemene som kan tenkes. Når du har lært å bruke dem på et grunnleggende nivå, må du lære alt om hvordan foreldre som bare inneholder flytende barn, har en kollapset høyde, noe som deretter fører til syttifire forskjellige måter å løse problemet gjennom clearfixes og overflow manipulasjoner.
Heldigvis blir du vant til konseptene bak flottører på lang sikt, og de kan til og med bli så enkle å bruke at du overhode ikke tenker på dem. Det eneste som står mellom deg og det målet er en solid artikkel eller to som virkelig graver inn og forklarer flott oppførsel og teknikker grundig.
Ressurser for å komme deg dit
Alt du aldri visste om CSS-flyter
I denne artikkelen dekker jeg nesten hele spekteret av emner angående flottører i CSS. Det starter med en grunnleggende diskusjon om hva flytere er og hvordan de fungerer. Etter dette snakker jeg om hvordan flottører påvirker boksene til de involverte elementene, hvordan flytere blir rare med elementer i forskjellige høyder, de ni reglene som dekker flottørenes oppførsel og selvfølgelig den fallende høydefeilen og hvordan fikser du det.
Alt om flyter
Chris Coyier har alltid vært min favorittforfatter når det kommer til CSS-relaterte emner, og introduksjonen til floats skuffer ikke. Hvis du leter etter en kort, men enkel diskusjon om hvordan du jobber med flottører, har dette stykket du dekket. Spesielt liker jeg de enkle, attraktive illustrasjonene som brukes gjennom hele artikkelen.
The Mystery Of CSS Float Property
Mens Chris Coyiers stykker typisk er korte og til poenget, er innholdet i Smashing Magazine vanligvis ganske ekspansivt med mange eksempler og relevant diskusjon. Denne artikkelen introduserer konseptet med flottører, forteller deg alt om hvordan du bruker og rydder dem, og starter deretter inn i en diskusjon om hvor du vanligvis ser flottører som brukes på nettsteder. Hvis du trenger å se teorien bli levende, er denne for deg.
3. Kjenn dine valg
En av nøklene til å skrive god ren CSS er å ha et sterkt grep om hvilke CSS-velgere som er tilgjengelige for deg, hvordan de fungerer og i hvilken grad de støttes i forskjellige nettlesere. Det høres ut som et enkelt nok emne, men i virkeligheten er verdenen til CSS-velgere ganske kompleks.
Det er mange forskjellige interessante ting å lære om her, fra å bruke attributtverdivalgere og målrette nøkkelord i klassens navn til hvordan universalvelgeren kan være nyttig for feilsøking av koden din. Selv om du tror at du personlig kan klare deg uten å forstå en rekke fancy velgere, er sannheten at andre kodere bruker disse tingene hver dag, og du må kunne forstå hva du ser når du treffer visningskilde!
Ressurser for å komme deg dit
CSS-velgere: Bare de vanskelige bitene
Dette er en morsom artikkel som først og fremst ser på de mer kompliserte sidene ved CSS-velgere. Jeg hopper over ting fra bakkenivå og hopper rett inn i å diskutere hvordan konseptet med DOM oversettes til å målrette forskjellige aspekter av dokumentet ditt med CSS. Du lærer alt om valg av barn og søsken, hvordan kjede til selgere og mye mer.
De 30 CSS-velgerne du må huske
Jeffrey Way er en rockstjerne på nettet, og artikler som dette beviser hvorfor. Denne Nettuts + -artikkelen dekker et stort utvalg av CSS-velgere i et enkelt og kort format som legger mye vekt på nettleserstøtte. Utrolig nok kodet Jeff til og med live-eksempelsider for hver av de tretti valgene.
CSS attributtvelgere: Hvordan og hvorfor du bør bruke dem
Valg av attributtverdier er en av de kraftigste undergruppene til CSS-velgere, og CSS3 øker virkelig den kraften. Du vil ikke tro hvor allsidige velgerne dine kan bli med litt attributtverdi-magi. Etter å ha lest denne artikkelen, slenger du rundt setninger som "vilkårlig valg av attributt-attributtverdier" som en proff.
4. Lær DRY-kodingskonsepter
"Ikke gjenta deg selv." Denne enkle frasen har drastiske implikasjoner når det gjelder koding. Når du virkelig dykker inn i DRY-kodingspraksis, er resultatet renere kode, mindre arbeid og en vakker ny arbeidsflyt som er like kraftig som den er fantastisk.
I motsetning til de andre emnene ovenfor, som er ganske smale, er dette et ganske stort emne som dekker alle slags forskjellige praksiser, teknikker og ideer. Interessant nok er en av tingene som nylig har fått tankene mine fokusert på DRY-kodingspraksis, bruken av CSS-forbehandlere.
Selv om mange hevder at forbehandlere fører til dårlig kodingspraksis, er virkeligheten motsatt. Selvfølgelig hjelper forbehandlere selv med å unngå manuell repetisjon, men det går utover det. Å undersøke produksjonen av verktøy som MINDRE og SASS og målene for språkene generelt har faktisk ført til at jeg har skrevet bedre ren CSS! Når du mestrer konsepter som @extend i Sass, kan du ikke la være å tenke på implikasjonene når du bare koder med CSS.
Ressurser for å komme deg dit
TØR CSS: Gjenta ikke CSS
I denne artikkelen introduserer Steven Bradley temaet DRY CSS og dekker noen av hovedprinsippene og målene. Han koker praksis ned til tre enkle ideer og viser deg hvordan du implementerer disse ideene i en virkelig arbeidsflyt. Konseptene er i stor grad lånt fra en Jeremy Clarke-presentasjon som dekker det samme emnet.
En introduksjon til objektorientert CSS (OOCSS)
Som jeg nevnte tidligere, ideene som ligger i DRY CSS-bevegelsen er ganske vidtrekkende og direkte relatert til konsepter i andre konstruksjoner. OOCS er en stadig mer populær metodikk som tar sikte på å hjelpe deg med å lage raskere, mer effektive stilark med overlegen organisering og mindre repetisjon. Det er to hovedprinsipper på jobb i OOCS: separering av struktur fra hud og separering av containere og innhold. Denne artikkelen fra Smashing Magazine vil lede deg gjennom de grunnleggende ideene og hjelpe deg å bruke dem på ditt eget arbeid.
En introduksjon til SMACSS Retningslinjer for skriving av CSS
Husker du Steven Bradley fra den første artikkelen på DRY CSS? Han skrev også dette stykket, som forklarer et prosjekt som ligner på, men atskilt fra OOCS: SMACSS (et prosjekt fra Jonathan Snook). Som med OOCSS har SMACSS to hovedmål. Den første er å øke den semantiske verdien til en del av HTML og innhold, og den andre er å redusere forventningen til en spesifikk HTML-struktur. Denne artikkelen forklarer begge målene i detalj og gir nyttige kodeeksempler slik at du kan se SMACSS i aksjon.
5. Kjenn nettleserstøtten din
Den femte og siste nøkkelen til å forbedre CSS-en er å vite hva som fungerer der. CSS3 er altfor lokkende for de fleste av oss å ignorere, men den harde sannheten er at en hel haug av den ikke fungerer i visse nettlesere (av “visse nettlesere” mener jeg selvfølgelig IE).
Den store hemmeligheten som nettutviklere for nybegynnere trenger å komme inn i hodet på, er ikke at de trenger å huske hver eneste CSS-funksjon, og hvordan hver nettleser kjent for å håndtere den, i stedet er at det er helt fantastiske ressurser tilgjengelig for deg som gir deg denne informasjonen. fritt, du må bare vite hvor du skal lete.
Ressurser for å komme deg dit
Stikkende nettleserstøtte i CSS3 og HTML5: Uvurderlige ressurser å bruke i dag
I denne artikkelen introduserer jeg deg for de relativt få nettstedene jeg har bokmerke for å sjekke nettleserstøtte. Disse ressursene er fantastiske, visuelle og gir deg den informasjonen du trenger på en jiffy, slik at du kan komme tilbake til koding. Ta en titt for å se hva de er!
Nettleserstøtte for CSS3: Hva er gjeldende status?
Denne artikkelen ble skrevet for over ett år siden, slik at “gjeldende status” -stykket kan diskuteres, men ikke nok har endret seg på dette tidspunktet for å gjøre informasjonen i denne artikkelen foreldet. Det fungerer som en utrolig nyttig oversikt over ulike CSS3-egenskaper, delt inn i seksjoner basert på hva som fungerer overalt og hva du trenger å passe på. Det tar bare noen minutter å gå gjennom, og det er vel verdt å lese.
Viktigheten av tverrleserkompatibilitet: tips og ressurser
Hvis du virkelig er ny på CSS og trenger en grunnleggende introduksjon til emnet nettleserkompatibilitet, og hvorfor det er viktig, har denne Noupe-artikkelen omtalt. Mer enn bare å selge deg på ideen om kompatibilitet, viser den en mengde gode ressurser du kan bruke for å sikre maksimal kompatibilitet. Av spesiell interesse er listen over verktøy som vil hjelpe deg å teste nettstedet ditt i forskjellige nettlesere.
Det er meningen at jeg skal lese alt om 24 timer?
Jeg har presentert fem absolutt kritiske emner du kan studere og ikke mindre enn femten artikler hvor du kan lære de prinsippene du trenger å vite. Dette er bra og bra, men i tittelen min lovet jeg at du ville bli bedre på en dag og ikke alle har tid til å sette seg ned og lese femten lange artikler!
Den gode nyheten er at jeg ga deg tre artikler om hvert emne, slik at du ville ha noe valg å velge mellom. Jeg forklarte innholdet i hver detalj, slik at du kan velge det som best passer dine behov. Husk å velge artiklene du vil lese, ikke basert på det du vet, men det du ikke vet. Gjør det til et mål å fylle hullene i kunnskapen din.
Mitt forslag er å bla gjennom innholdet over og velge fem artikler du vil lese (en fra hver seksjon). Selv det er mye å ta på seg i løpet av en dag, men de fleste av dem er ikke for mye mer enn tusen ord eller så, mange er mindre. Jeg er trygg på at du kan trekke den av. Hvis du ikke kan, ikke noe problem. Endre målet ditt for å forbedre CSS-ferdighetene dine i løpet av en uke, og les en av de fem valgte artiklene dine hver dag de neste fem dagene. Jeg garanterer at neste uke vil du være mye bedre til å skrive klar, konsis, kompatibel og gjenbrukbar CSS.
Hvilke andre konsepter anbefaler du?
Nå som du har lest de fem beste temaene mine som folk bør pusse opp for å forbedre CSS-ferdighetene sine, vil jeg høre fra deg. Hvilke andre temaer tror du CSS-kodere vanligvis sliter med, og hvilke ressurser anbefaler du for alle som ønsker å lære mer?
Aksjebilder gitt med tillatelse av BigStock
