5 kroků k drastickému zlepšení znalostí o CSS do 24 hodin
Už nějakou dobu jste kódovali a znáte cestu kolem souboru CSS. Nejste určitě žádným mistrem, ale s dostatečným hádáním se můžete dostat tam, kam chcete. Zajímalo by vás, jestli někdy překonáte ten bod, kdy je CSS takový boj. Budete někdy schopni vyhodit složité rozložení, aniž byste se nakonec uchýlili k pokusům a omylům, abyste viděli, co funguje a co ne?
Dobrou zprávou je, že se můžete opravdu dostat přes ten frustrující bod, kde znáte dost CSS pro kódování webových stránek, ale chybí vám pevný základ, který vám umožní kódovat bez obtěžování tím, že nebudete přesně rozumět tomu, jak se dostanete tam, kde jste ' znovu, a tento bod je mnohem blíž, než si myslíte. Navrhuji, že existuje pět témat, která výrazně zlepší vaše porozumění CSS. Strávit nějaký čas čtením o každém v příštích čtyřiadvaceti hodinách a budete měnit způsob, jakým kód navždy.
Prozkoumejte prvky Envato
1. Zabalte svou mysl kolem polohovacích kontextů
Pokud opravdu chcete mít solidní porozumění tomu, jak pomocí CSS přesouvat prvky HTML na místo, kam chcete, musíte absolutně získat kontrolu nad polohami kontextů. A nemyslím jen příležitostné porozumění, mám na mysli hlubokou znalost jejich rozdílů, chování, vtípků atd.
Ve skutečnosti byste měli rozumět pěti hodnotám polohy. Pokud nemůžete pojmenovat všech pět, aniž byste je hledali, pak jste určitě hlavním kandidátem na tento kousek vzdělání. Jsou to: statické, pevné, relativní, absolutní a zděděné.
Musíte vědět a pochopit všech pět, ale ty velké dva, které opravdu změní způsob, jakým kódujete, jsou absolutní a relativní pozice. Naučím se ovládat tyto dva polohovací kontexty samostatně a poté skočit na to, jak spolupracují, zásadně změní způsob, jakým si prohlížíte rozvržení CSS, slibuji. Je to zjevení, díky kterému bude vaše práce nekonečně snadnější.
Zdroje, jak se tam dostat
Snížení absolutního vs. relativního umístění
Toto je můj hluboký ponoření do předmětu pozičního kontextu. Stručně zmíním a vysvětlím všech pět, ale ve skutečnosti se zaměřuji na dva velké: jak se liší, jak se liší a jak spolupracují. Přečtěte si tento kus a budete na dobré cestě k bezhlavému určování polohy CSS.
Umístění CSS 101
Tento kousek pochází z úctyhodného blogu A List Apart, takže hned víte, že to bude důkladné a neuvěřitelně vzdělávací. Článek byl publikován již v roce 2010, ale informace jsou stále dokonale relevantní a slouží jako skvělý úvod do všech pěti kontextů pro určování polohy. Nejedná se o velmi vizuální článek, ale má mnoho jednoduchých příkladů kódu, které vás ulehčí každému konceptu.
Naučte se umístění CSS v deseti krocích
Toto je fantasticky krátký přehled různých polohových kontextů. Namísto jednoho dlouhého článku se na této stránce nachází krabička s deseti kartami. Každá karta má malý zlomek kódu a větu nebo dvě vysvětlující kód. Vypnuto vpravo je živé ukázkové rozložení, které se aktualizuje s každou kartou. Tento formát je skvělý pro vizuální propojení fragmentů kódu s rozvržením, která vytvářejí, a vřele doporučuji, abyste se na něj podívali, pokud se potýkáte s většinou textovými vysvětleními, jako je ta výše uvedená z ALA.
2. Master Floats
Když se poprvé učíte CSS, plováky se zdají jako jeden z nejvíce zašroubovaných systémů rozvržení, jaké si lze představit. Jakmile se naučíte používat je na základní úrovni, musíte se naučit vše o tom, jak rodiče obsahující pouze vznášené děti mají zhroucenou výšku, což pak vede k čtyřiceti sedmi různým způsobům, jak problém vyřešit pomocí jasných oprav a přetečení manipulací.
Naštěstí si z dlouhodobého hlediska zvyknete na koncepty vznášející se a mohou se dokonce snadno používat tak, že jim příliš nedomyslíte. Jediná věc, která stojí mezi vámi a tímto cílem, je solidní článek nebo dva, který se skutečně vrací a důkladně vysvětluje plovoucí chování a techniky od základů.
Zdroje, jak se tam dostat
Vše, co jste nikdy nevěděli o CSS Floats
V tomto článku se zabývám téměř úplnou škálou témat týkajících se plováků v CSS. Začíná se základní diskuzí o tom, co jsou plováky a jak fungují. Poté mluvím o tom, jak plováky ovlivňují krabice příslušných prvků, jak plováky se diví s prvky různých výšek, devíti pravidly, která se vztahují k chování plováků a samozřejmě s klesající výškou debaklu a jak je opravit.
Vše o plovácích
Chris Coyier byl vždy mým oblíbeným autorem, pokud jde o témata související s CSS a jeho úvod do floatů nezklame. Pokud hledáte krátkou, ale přímou diskusi o tom, jak pracovat s plaváky, tento kus vás napadl. Obzvláště se mi líbí jednoduché a atraktivní ilustrace použité v celém článku.
Tajemství plovoucí vlastnosti CSS
Zatímco kusy Chrisa Coyiera jsou obvykle stručné a věcné, obsah časopisu Smashing Magazine je obvykle poměrně rozsáhlý s mnoha příklady a relevantní diskusí. Tento článek představuje pojem plováky, řekne vám vše o tom, jak je používat a vyčistit, a poté se diskutuje o tom, kde obvykle vidíte, jak se plováky používají v reálných světových webech. Pokud potřebujete vidět ožívání teorie, je tato pro vás.
3. Poznejte své selektory
Jedním z klíčů k psaní dobrého čistého CSS je mít silnou představu o tom, jaké výběrové prvky CSS máte k dispozici, jak fungují a do jaké míry jsou podporovány v různých prohlížečích. Zní to jako dost jednoduché téma, ale ve skutečnosti je svět selektorů CSS docela složitý.
Zde je spousta různých zajímavých věcí, od kterých se dozvíte, od používání selektorů hodnot atributů a cílení na klíčová slova v názvech tříd až po to, jak může univerzální selektor pomoci při ladění kódu. I když si myslíte, že se můžete osobně dostat bez porozumění spoustu efektivních selektorů, pravdou je, že ostatní kodéry používají tyto věci každý den a musíte být schopni porozumět tomu, co vidíte, když narazíte na zdroj zobrazení!
Zdroje, jak se tam dostat
CSS Selectors: Just Tricky Bits
Toto je zábavný článek, který se zaměřuje především na složitější aspekty selektorů CSS. Přeskočím přízemní věci a skočím přímo do diskuse o tom, jak se koncept DOM promítá do cílení různých aspektů vašeho dokumentu pomocí CSS. Dozvíte se vše o výběru dětí a sourozenců, o tom, jak řetězy vybírat a mnohem více.
30 selektorů CSS, které si musíte zapamatovat
Jeffrey Way je webová dev rocková hvězda a podobné články dokazují proč. Tento článek Nettuts + zahrnuje širokou škálu selektorů CSS v jednoduchém a krátkém formátu, který klade velký důraz na podporu prohlížečů. Je ohromující, že Jeff dokonce kódoval živé ukázkové stránky pro každého z třiceti selektorů.
Selektory atributů CSS: Jak a proč byste je měli používat
Selektory hodnot atributů jsou jednou z nejsilnějších podmnožin selektorů CSS a CSS3 tuto sílu skutečně zvyšuje. Nebudete věřit, jak všestranní mohou být vaše selektory s trochou magie hodnot atributu. Po přečtení tohoto článku se budete pohybovat frázemi jako „selektor libovolné hodnoty atributu podřetězce“ jako profesionál.
4. Naučte se DRY Coding Concepts
"Neopakujte se." Tato jednoduchá fráze má drastické důsledky, pokud jde o kódování. Když se opravdu ponoříte do kódování DRY, výsledkem je čistší kód, méně práce a krásný nový pracovní postup, který je stejně silný jako je skvělý.
Na rozdíl od ostatních výše uvedených témat, která jsou dosti úzká, je toto téma velmi rozsáhlé téma, které pokrývá všechny druhy různých praktik, technik a nápadů. Je zajímavé, že jednou z věcí, které se mi nedávno zaměří na praktiky kódování DRY, je použití preprocesorů CSS.
Ačkoli mnozí tvrdí, že preprocesory vedou ke špatným praktikám kódování, realita je opačná. Je zřejmé, že samotní preprocesoři pomáhají vyhnout se ručnímu opakování, ale to jde dále. Zkoumání výstupu nástrojů jako LESS a SASS a cílů pro jazyky obecně vedlo ke mně, že jsem psal lépe čisté CSS! Jakmile zvládnete pojmy jako @extend v Sass, nemůžete si pomoci, ale přemýšlejte o důsledcích, když kódujete pouze CSS.
Zdroje, jak se tam dostat
SUCHÉ CSS: Neopakujte své CSS
V tomto článku vás Steven Bradley seznamuje s tématem DRY CSS a pokrývá některé z jeho hlavních principů a cílů. Pracuje s praxí až na tři jednoduché nápady a ukazuje, jak je implementovat v reálném pracovním postupu. Tyto koncepty jsou do velké míry půjčovány z prezentace Jeremyho Clarka, která se zabývá stejným tématem.
Úvod do objektově orientovaného CSS (OOCSS)
Jak jsem již zmínil, myšlenky spojené s hnutím DRY CSS jsou velmi dalekosáhlé a přímo souvisí s koncepty v jiných konstruktech. OOCS je stále populárnější metodologie, jejímž cílem je pomoci vám vytvářet rychlejší a efektivnější šablony stylů s vynikající organizací a méně opakováním. V OOCS pracují dva hlavní principy: oddělení struktury od kůže a oddělení nádob a obsahu. Tento článek z časopisu Smashing Magazine vás provede základními nápady a pomůže vám je aplikovat na vaši vlastní práci.
Úvod do pokynů SMACSS pro psaní CSS
Vzpomínáte si na Stevena Bradleyho z prvního článku o DRY CSS? Také napsal tento kus, který vysvětluje projekt, který je podobný, ale oddělený od OOCS: SMACSS (projekt od Jonathana Snooka). Stejně jako u OOCSS má SMACSS dva hlavní cíle. Prvním je zvýšení sémantické hodnoty části HTML a obsahu a druhým je snížení očekávání konkrétní struktury HTML. Tento článek podrobně vysvětluje oba cíle a poskytuje užitečné příklady kódu, takže můžete vidět SMACSS v akci.
5. Poznejte podporu vašeho prohlížeče
Pátým a posledním klíčem ke zlepšení vašeho CSS je vědět, co funguje. CSS3 je příliš lákavá pro většinu z nás ignorovat, ale tvrdá pravda je, že celá skupina to nefunguje v určitých prohlížečích („jistými prohlížeči“ samozřejmě myslím IE).
Velkým tajemstvím, které se musí nováčtí weboví vývojáři dostat do hlavy, není to, že si musí zapamatovat každou jednotlivou funkci CSS a to, jak ji zpracovává každý prohlížeč známý člověku, místo toho je to, že jsou vám k dispozici naprosto úžasné zdroje, které vám tyto informace poskytují. svobodně, stačí vědět, kde hledat.
Zdroje, jak se tam dostat
Podpora prohlížeče nehtů v CSS3 a HTML5: neocenitelné zdroje, které lze dnes použít
V tomto článku vám představím relativně málo stránek, které jsem označil záložkou pro kontrolu podpory prohlížeče. Tyto zdroje jsou fantastické, vizuální a poskytují vám informace, které potřebujete, ve zkratce, abyste se mohli vrátit ke kódování. Podívejte se, co jsou!
Podpora prohlížeče pro CSS3: Jaký je aktuální stav?
Tento článek byl napsán před rokem, takže část „současný stav“ je diskutabilní, ale v této době se nestalo dost změn, aby byly informace v tomto článku zastaralé. Slouží jako neuvěřitelně užitečný přehled různých vlastností CSS3, rozdělených do sekcí na základě toho, co funguje všude a na co je třeba dávat pozor. Trvá to jen pár minut, než to projde, a stojí to za přečtení.
Důležitost kompatibility mezi prohlížeči: Tipy a zdroje
Pokud jste do CSS opravdu nová a potřebujete základní úvod do problematiky kompatibility prohlížeče a proč je to důležité, tento článek Noupe vás zabýval. Nejen, že vás pouze prodává na myšlenku kompatibility, ale obsahuje spoustu skvělých zdrojů, které můžete použít k zajištění maximální kompatibility. Obzvláště zajímavý je seznam nástrojů, které vám pomohou testovat vaše stránky v různých prohlížečích.
Mám to všechno číst za 24 hodin?
Představil jsem vám pět naprosto kritických témat, která byste měli studovat, a ne méně než patnáct článků, z nichž se můžete naučit principům, které potřebujete znát. To je vše v pořádku, ale v mém titulu jsem slíbil, že se za jeden den zlepšíte, a ne každý má čas si sednout a přečíst si patnáct dlouhých článků!
Dobrou zprávou je, že jsem vám dal tři články na každé téma, takže byste si měli vybrat z široké nabídky. Podrobně jsem vysvětlil obsah každého z nich, takže si můžete vybrat ten, který nejlépe vyhovuje vašim potřebám. Nezapomeňte si vybrat články, které chcete číst, nikoli na základě toho, co víte, ale co nevíte. Ať je to cíl zaplnit mezery ve vašich znalostech.
Mým návrhem je procházet výše uvedený obsah a vybrat pět článků ke čtení (jeden z každé sekce). Dokonce i to je spousta věcí za den, ale většina z nich není o moc víc než tisíc slov, mnoho jich je méně. Jsem přesvědčen, že to můžete vytáhnout. Pokud nemůžete, žádný problém. Změňte svůj cíl zlepšování dovedností CSS za týden a každý den si přečtěte jeden z vašich pěti vybraných článků na následujících pět dní. Zaručuji, že příští týden budete mnohem lépe psát jasné, stručné, kompatibilní a opakovaně použitelné CSS.
Jaké další koncepty doporučujete?
Nyní, když jste si přečetli mých pět hlavních témat, na která by se lidé měli zaměřit, aby si zlepšili své dovednosti CSS, chci od vás slyšet. Jaká další témata si myslíte, že CSS kodéry obvykle bojují a jaké zdroje doporučujete každému, kdo se chce dozvědět více?
Fotografie poskytnuté s laskavým svolením BigStock
