5 soļi, lai 24 stundās strauji uzlabotu savas CSS zināšanas
Jūs jau kādu laiku kodējat un zināt savu ceļu uz CSS failu. Jūs noteikti neesat nekāds meistars, taču ar pietiekamu vijienu jūs varat nokļūt tur, kur vēlaties doties. Jūs tomēr domājat, vai kādreiz nonāksit garām tam punktam, kurā CSS ir tik liela cīņa. Vai jūs kādreiz varēsit izsist sarežģītu izkārtojumu, galu galā neizmantojot izmēģinājumus un kļūdas, lai redzētu, kas darbojas un kas ne?
Labā ziņa ir tā, ka jūs patiešām varat nokļūt garām šajā nomāktajā vietā, kur zināt pietiekami daudz CSS, lai kodētu vietni, taču trūkst stingra pamata, kas ļauj kodēt bez kairinājuma, kas īsti nesaprot, kā jūs nokļūsit tur, kur nokļūstat. ejam, un šis punkts ir daudz tuvāk, nekā jūs domājat. Es ierosinu, ka ir piecas tēmas, kas krasi uzlabos jūsu izpratni par CSS. Pavadiet laiku lasot katru nākamo divdesmit četru stundu laikā, un jūs mainīsit kodēšanas veidu uz visiem laikiem.
Izpētiet Envato elementus
1. Aplieciet savas domas ap pozicionēšanas kontekstiem
Ja jūs patiešām vēlaties iegūt skaidru izpratni par to, kā izmantot CSS, lai HTML elementus pārvietotu uz turieni, kurp vēlaties, jums noteikti jāpārliecinās par pozicionēšanas kontekstiem. Un es nedomāju tikai gadījuma rakstura izpratni, es domāju dziļas zināšanas par viņu atšķirībām, izturēšanos, quirks utt.
Patiesībā ir piecas pozīcijas vērtības, kuras jums vajadzētu saprast. Ja jūs nevarat nosaukt visus piecus, nemeklējot tos, tad jūs noteikti esat galvenais kandidāts uz šo izglītību. Šeit viņi ir: statiski, fiksēti, relatīvi, absolūti un mantojami.
Jums jāzina un jāsaprot visi pieci, bet divi lielie, kas patiešām mainīs jūsu kodu, ir absolūtā un relatīvā pozicionēšana. Iemācoties iemācīties aplūkot šos divus pozicionēšanas kontekstus atsevišķi un pēc tam pārdomājot, kā tie darbojas kopā, es būtiski mainīšu veidu, kā skatāt CSS izkārtojumu, es apsolu. Tā ir atklāsme, kas padarīs jūsu darbu bezgalīgi vieglu.
Resursi, lai jūs tur nokļūtu
Zema līmeņa rādītājs attiecībā pret absolūto un relatīvo pozicionēšanu
Šis ir mans dziļais niršanas jautājums pozicionēšanas kontekstā. Es īsi pieminu un izskaidroju visus piecus, bet patiešām koncentrējos uz diviem lielajiem: kā viņi atšķiras, kā viņi atšķiras un kā viņi strādā kopā. Izlasiet šo rakstu, un jums būs labs veids, kā CSS pozicionēt bez galvassāpēm.
CSS pozicionēšana 101
Šis gabals nāk no godājamā emuāra A List Apart, tāpēc uzreiz zināt, ka tas būs gan pamatīgs, gan neticami izglītojošs. Raksts tika publicēts 2010. gadā, taču informācija joprojām ir pilnīgi būtiska, un tā kalpo kā lielisks ievads visiem pieciem pozicionēšanas kontekstiem. Tas nav ļoti vizuāls raksts, taču tajā ir daudz vienkāršu kodu piemēru, lai jūs atvieglotu katra jēdziena izveidē.
Uzziniet CSS pozicionēšanu desmit soļos
Šis ir fantastiski īss dažādu pozicionēšanas kontekstu pārskats. Viena gara spārnota raksta vietā šajā lapā ir parādīta maza kaste ar desmit cilnēm. Katrā cilnē ir niecīgs koda fragments un teikums vai divi, kas izskaidro kodu. Izslēgts labajā pusē ir reāls izkārtojuma piemērs, kas tiek atjaunināts ar katru cilni. Šis formāts ir fantastisks, lai vizuāli sasaistītu koda fragmentus ar to radītajiem izkārtojumiem, un es ļoti iesaku to aplūkot, ja jūs cīnāties ar galvenokārt teksta skaidrojumiem, piemēram, iepriekš aprakstītajiem no ALA.
2. Kapteiņa pludiņi
Kad jūs pirmo reizi apgūstat CSS, pludiņi šķiet viena no vispievilcīgākajām izdomājamajām izkārtojumu sistēmām. Kad jūs iemācīsities tos izmantot pamata līmenī, jums jāiemācās viss par to, kā vecākiem, kuru bērni satur tikai pludinātus bērnus, ir sabrukušais augums, kas noved pie četrdesmit septiņiem dažādiem veidiem, kā atrisināt problēmu, izmantojot notīrītus labojumus un pārpildes manipulācijas.
Par laimi ilgtermiņā jūs pieradīsit pie jēdzieniem, kas atrodas aiz pludiņiem, un tie pat var kļūt tik vienkārši lietojami, ka jūs viņiem nemaz nedomājat. Vienīgais, kas atrodas starp jums un šo mērķi, ir ciets vai divi raksti, kas patiešām iedziļinās un pilnīgi izskaidro pludiņa izturēšanos un metodes no paša sākuma.
Resursi, lai jūs tur nokļūtu
Viss, ko jūs nekad nezināt par CSS pludiņiem
Šajā rakstā es apskatīju gandrīz visu tēmu klāstu par pludiņiem CSS. Tas sākas ar pamata diskusiju par to, kas ir pludiņi un kā tie darbojas. Pēc tam es runāju par to, kā pludiņi ietekmē iesaistīto elementu kastes, kā pludiņi kļūst dīvaini ar dažāda augstuma elementiem, par deviņiem noteikumiem, kas attiecas uz pludiņa izturēšanos un, protams, uz sabrukušo augstuma satricinājumu un kā to labot.
Viss par pludiņiem
Chris Coyier vienmēr ir bijis mans mīļākais autors, kad runa ir par CSS saistītām tēmām, un viņa ievads pludiņos neliek vilties. Ja jūs meklējat īsu, bet tiešu diskusiju par to, kā strādāt ar pludiņiem, šis gabals ir jums veltīts. Īpaši man patīk vienkāršās, pievilcīgās ilustrācijas, kas izmantotas visā rakstā.
CSS peldošā īpašuma noslēpums
Kaut arī Krisa Koijēra raksti parasti ir īsi un precīzi, Smashing Magazine saturs parasti ir diezgan plašs ar daudziem piemēriem un attiecīgām diskusijām. Šajā rakstā ir ieviests pludiņu jēdziens, pastāstīts par visu to lietošanu un notīrīšanu, pēc tam uzsākot diskusiju par to, kur jūs parasti redzat, ka pludiņi tiek izmantoti reālās pasaules vietnēs. Ja jums jāredz, kā teorija atdzīvojas, šī ir jums.
3. Ziniet savus atlasītājus
Viens no taustiņiem labas tīras CSS rakstīšanai ir precīza izpratne par to, kādi CSS atlasītāji jums ir pieejami, kā tie darbojas un kādā mērā tie tiek atbalstīti dažādās pārlūkprogrammās. Tas izklausās pēc pietiekami vienkāršas tēmas, taču patiesībā CSS atlasītāju pasaule ir diezgan sarežģīta.
Šeit ir jāapgūst daudz dažādu interesantu lietu, sākot no atribūtu vērtības atlasītāju izmantošanas un atslēgvārdu mērķauditorijas atlases klasēs līdz tam, kā universālais atlasītājs var būt noderīgs jūsu koda atkļūdošanai. Pat ja jūs domājat, ka varat personīgi tikt galā, nesaprotot izveicīgu atlasītāju loku, patiesība ir tāda, ka citi kodētāji katru dienu izmanto šo saturu, un jums ir jāspēj saprast, ko jūs redzat, kad esat ieguvis skatu avotu!
Resursi, lai jūs tur nokļūtu
CSS atlasītāji: tikai viltīgie biti
Šis ir jautrs raksts, kurā galvenokārt apskatīti sarežģītāki CSS atlasītāju aspekti. Es izlaižu zemes līmeņa lietas un tūlīt pārdomāju, kā DOM jēdziens nozīmē dažādu jūsu dokumenta aspektu noteikšanu ar CSS. Jūs uzzināsit visu par bērnu un brāļu un māsu atlasi, par ķēžu selektoriem un daudz ko citu.
30 CSS atlasītāji, kas jums jāiegaumē
Džefrijs Veids ir tīmekļa dev rockstar, un šādi raksti pierāda, kāpēc. Šis Nettuts + raksts aptver plašu CSS atlasītāju klāstu vienkāršā un īsā formātā, kurā liels uzsvars tiek likts uz pārlūka atbalstu. Pārsteidzoši, ka Džefs pat kodēja tiešās parauga lapas katram no trīsdesmit atlasītājiem.
CSS atribūtu atlasītāji: kā un kāpēc tos vajadzētu izmantot
Atribūtu vērtības selektori ir viena no visspēcīgākajām CSS atlasītāju apakškopām, un CSS3 šo jaudu patiešām palielina. Jūs neticēsit, cik daudzpusīgi jūsu atlasītāji var kļūt ar nelielu atribūtu vērtības burvību. Pēc šī raksta lasīšanas jūs, piemēram, profesionāls, apvelciet tādas frāzes kā “patvaļīgs apakšvirknes atribūta vērtības atlasītājs”.
4. Uzziniet DRY kodēšanas koncepcijas
"Neatkārtojiet sevi." Šai vienkāršajai frāzei ir dramatiska ietekme uz kodēšanu. Kad jūs patiešām iegremdējaties DRY kodēšanas praksē, rezultāts ir tīrāks kods, mazāk darba un skaista jauna darbplūsma, kas ir tikpat spēcīga, jo tā ir satriecoša.
Atšķirībā no citām iepriekš minētajām tēmām, kas ir diezgan šauras, šī ir diezgan plaša tēma, kas aptver visu veidu atšķirīgo praksi, paņēmienus un idejas. Interesanti, ka viena no lietām, kas man pēdējā laikā liek domāt par DRY kodēšanas praksi, ir CSS priekšapstrādātāju izmantošana.
Lai arī daudzi apgalvo, ka priekšapstrādātāji noved pie sliktas kodēšanas prakses, realitāte ir pretēja. Acīmredzot paši apstrādātāji palīdz izvairīties no manuālas atkārtošanās, bet tas pārsniedz to. Pārbaudot tādu rīku iznākumu kā LESS un SASS, kā arī mērķus attiecībā uz valodām, vispār esmu licis man uzrakstīt labāk tīru CSS! Kad esat apguvis tādas koncepcijas kā @extend Sass, jūs nevarat pārdomāt sekas, ko kodējat tikai ar CSS.
Resursi, lai jūs tur nokļūtu
DRY CSS: neatkārtojiet CSS
Šajā rakstā Stīvens Bredlijs iepazīstina jūs ar DRY CSS tēmu un aptver dažus no tās galvenajiem principiem un mērķiem. Viņš apkopo praksi līdz trim vienkāršām idejām un parāda, kā šīs idejas īstenot reālā darbplūsmā. Koncepcijas lielākoties ir aizgūtas no Džeremija Klārka prezentācijas, kurā apskatīta tā pati tēma.
Ievads objektorientētā CSS (OOCSS)
Kā jau minēju iepriekš, DRY CSS kustībai raksturīgās idejas ir diezgan tālejošas un tieši saistītas ar citu konstrukciju jēdzieniem. OOCS ir aizvien populārāka metodoloģija, kuras mērķis ir palīdzēt jums izveidot ātrākas, efektīvākas stila lapas ar labāku organizāciju un mazāku atkārtojumu. OOCS darbojas divi galvenie principi: struktūras atdalīšana no ādas un konteineru un satura atdalīšana. Šis Smashing Magazine raksts palīdzēs jums iepazīties ar pamata idejām un palīdzēs tās pielietot jūsu pašu darbam.
Ievads SMACSS vadlīnijās CSS rakstīšanai
Vai atceraties Stīvenu Bredliju no pirmā raksta par DRY CSS? Viņš arī uzrakstīja šo darbu, kas izskaidro projektu, kas ir līdzīgs, bet ir atdalīts no OOCS: SMACSS (Jonathan Snook projekts). Tāpat kā OOCSS, SMACSS ir divi galvenie mērķi. Pirmais ir palielināt HTML sadaļas un satura semantisko vērtību, bet otrais - samazināt cerības uz noteiktu HTML struktūru. Šajā rakstā ir sīki izskaidroti abi mērķi un sniegti noderīgi koda piemēri, lai jūs varētu redzēt SMACSS darbībā.
5. Ziniet sava pārlūka atbalstu
Piektais un pēdējais atslēga CSS uzlabošanai ir zināt, kas darbojas kur. CSS3 ir pārāk vilinošs lielākajai daļai no mums, lai to ignorētu, taču patiesība ir tāda, ka vesela virkne to nedarbojas noteiktos pārlūkos (ar “noteiktiem pārlūkiem” es, protams, domāju IE).
Liels noslēpums, kas iesācējiem tīmekļa izstrādātājiem jāiekļūst savās galvās, nav tas, ka viņiem ir jāiegaumē katra CSS funkcija un tas, kā to apstrādā katrs cilvēkiem zināmais pārlūks, tā vietā, ka jums ir pieejami absolūti pārsteidzoši resursi, kas sniedz jums šo informāciju. brīvi, jums vienkārši jāzina, kur meklēt.
Resursi, lai jūs tur nokļūtu
Naglotāju pārlūka atbalsts CSS3 un HTML5: nenovērtējami resursi, ko izmantot šodien
Šajā rakstā es jūs iepazīstinu ar salīdzinoši nedaudzām vietnēm, kuras esmu atzīmējis ar grāmatzīmēm pārlūka atbalsta pārbaudei. Šie resursi ir fantastiski, vizuāli un sniedz jums nepieciešamo informāciju vienā mirklī, lai jūs varētu atgriezties pie kodēšanas. Ieskatieties, lai redzētu, kādi viņi ir!
CSS3 pārlūka atbalsts: kāds ir pašreizējais statuss?
Šis raksts tika rakstīts pirms vairāk nekā gada, tāpēc gabals “pašreizējais statuss” ir apstrīdams, taču šajā laikā tas nav pietiekami mainījies, lai šajā rakstā sniegtā informācija būtu novecojusi. Tas kalpo kā neticami noderīgs dažādu CSS3 īpašību pārskats, kas ir sadalīts sadaļās, pamatojoties uz to, kas darbojas visur un no kā jums jāuzmanās. Tas prasīs tikai dažas minūtes, un tas ir lasīšanas vērts.
Pārrobežu pārlūku saderības nozīme: padomi un resursi
Ja esat patiešām iesācējs CSS un jums ir nepieciešams pamata ievads par pārlūka saderības tēmu un kāpēc tas ir svarīgi, šajā Noupe rakstā jūs esat apskatījis. Tajā ir ne tikai piedāvāts jums saderības ideja, bet arī uzskaitīti daudzi lieliski resursi, kurus varat izmantot, lai nodrošinātu maksimālu saderību. Īpaša interese ir to rīku saraksts, kas palīdzēs jums pārbaudīt jūsu vietni dažādos pārlūkos.
Man liekas, ka es to visu izlasīšu 24 stundās?
Esmu iepazīstinājis jūs ar piecām absolūti kritiskām tēmām un ne mazāk kā piecpadsmit rakstiem, no kuriem jūs varat uzzināt principus, kas jums jāzina. Tas viss ir labi un labi, bet savā nosaukumā es apsolīju, ka vienā dienā jūs kļūsit labāks, un ne visiem ir laiks sēdēt un izlasīt piecpadsmit garus rakstus!
Labā ziņa ir tā, ka es jums devu trīs rakstus par katru tēmu, lai jūs varētu izvēlēties no dažādajiem variantiem. Es sīki izskaidroju katra saturu, lai jūs varētu izvēlēties sev vispiemērotāko. Atcerieties, ka lasāmos rakstus izvēlējies nevis pamatojoties uz to, ko jūs zināt, bet uz to, ko nezināt. Padariet to par mērķi, lai aizpildītu nepilnības jūsu zināšanās.
Mans ieteikums ir pārlūkot iepriekš minēto saturu un izvēlēties piecus lasāmus rakstus (pa vienam no katras sadaļas). Pat tas ir daudz, kas jādara dienā, bet vairumam no tiem nav par daudz vai vairāk kā tūkstoš vārdu, bet daudziem - mazāk. Esmu pārliecināta, ka varat to novilkt. Ja jūs nevarat, nav problēmu. Mainiet savu mērķi uzlabot savas CSS prasmes nedēļā un nākamo piecu dienu laikā katru dienu lasiet vienu no pieciem izvēlētajiem rakstiem. Es garantēju, ka nākamnedēļ jums būs daudz labāk uzrakstīt skaidru, kodolīgu, saderīgu un atkārtoti lietojamu CSS.
Kādus citus jēdzienus jūs iesakāt?
Tagad, kad esat izlasījis manas piecas labākās tēmas, kuras cilvēkiem vajadzētu uzlabot, lai uzlabotu savas CSS prasmes, es gribu dzirdēt no jums. Ar kādām citām tēmām, jūsuprāt, CSS kodētāji parasti cīnās, un kādus resursus jūs iesakāt ikvienam, kurš vēlas uzzināt vairāk?
Fotoattēli tiek nodrošināti ar BigStock atbalstu
