5 sammu oma CSS-i teadmiste parandamiseks 24 tunni jooksul
Olete mõnda aega kodeerinud ja tunnete CSS-faili ümber. Kindlasti ei ole sa peremees, kuid piisavalt näppudega võid sa jõuda sinna, kuhu tahad minna. Te ei tea, kas pääsete kunagi sellest punktist, kus CSS on selline võitlus. Kas saate kunagi keeruka paigutuse välja visata, ilma et peaksite lõpuks katse ja eksituse poole pöörduma, et näha, mis töötab ja mis mitte?
Hea uudis on see, et võite tõepoolest pääseda sellest pettumust valmistavast punktist, kus tunnete piisavalt veebisaidi kodeerimiseks CSS-i, kuid puudub kindel alus, mis võimaldab teil koodi kodeerida ilma tüütuseta, et te ei saa täpselt aru, kuidas te kuhu jõuate ” lähed ja see punkt on palju lähemal kui arvate. Pakun, et on viis teemat, mis suurendavad märkimisväärselt teie arusaamist CSS-ist. Kulutage järgmise kahekümne nelja tunni jooksul igaühe kohta lugemist ja muudate koodi igavesti.
Uurige Envato elemente
1. Pange oma positsioon kontekstidesse ümber
Kui soovite tõesti omada kindlat arusaama sellest, kuidas kasutada CSS-i HTML-elementide viimiseks sinna, kuhu soovite, peate kindlasti saama positsioneerimiskontekstidest ülevaate. Ja ma ei pea silmas ainult juhuslikku mõistmist, ma pean silmas sügavat teadmist nende erinevustest, käitumisest, veidrustest jne.
Tegelikult peaksite mõistma viit positsiooniväärtust. Kui te ei saa kõiki viit nimetada ilma neid otsimata, siis olete kindlasti selle peamise hariduse peamine kandidaat. Siin nad on: staatilised, fikseeritud, suhtelised, absoluutsed ja päritavad.
Peate teadma ja mõistma kõiki viit, kuid kaks suurt, mis teie koodimisviisi tõesti muudavad, on absoluutne ja suhteline positsioneerimine. Õppides neid kahte positsioneerimiskonteksti eraldi käsitsema ja seejärel õppima, kuidas need koos töötavad, muudab põhimõtteliselt seda, kuidas te CSS-i paigutust vaatate, luban. See on ilmutus, mis muudab teie töö lõpmata lihtsaks.
Vahendid, et teid sinna saada
Madalseis absoluutse ja suhtelise positsioneerimise osas
See on minu sügav sukeldus positsioneerimise konteksti. Ma mainin ja selgitan lühidalt kõiki viit, kuid keskendun kahele suurele: kuidas nad erinevad, kuidas nad erinevad ja kuidas koos töötavad. Lugege seda kirjatükki läbi ja saate juba peavaluvaba CSS-i positsioneerimisvõimaluse.
CSS-i positsioneerimine 101
See tükk pärineb auväärsest A List Apart'i ajaveebist, nii et kohe teate, et see saab olema põhjalik ja uskumatult hariv. Artikkel avaldati 2010. aastal, kuid teave on endiselt täiesti asjakohane ja see on suurepärane sissejuhatus kõigisse viieni positsioneerimiskonteksti. See ei ole väga visuaalne artikkel, kuid sellel on palju lihtsaid koodinäiteid, et hõlbustada teid mõistel.
Õppige CSS-i positsioneerimist kümnes etapis
See on fantastiliselt lühike ülevaade erinevatest positsioneerimiskontekstidest. Ühe pika tuulega artikli asemel on sellel lehel väike kast koos kümne vahelehega. Igal vahekaardil on väike koodilõik ja lause selgitavad kood või lause või kaks. Väljas paremal on reaalajas näidispaigutus, mida värskendatakse iga vahekaardiga. See vorming on fantastiline koodilõikude visuaalseks linkimiseks nende toodetud paigutustega ja soovitan seda väga vaadata, kui vaeva näete enamasti teksti selgitustega, nagu näiteks ülaltoodud ALA-st.
2. Meister ujukid
Kui esimest korda CSS-i õppite, tunduvad hõljukid hõlpsamini ette kujutatud paigutussüsteemidena. Kui olete õppinud neid põhitasemel kasutama, peate õppima kõike selle kohta, kuidas ainult ujuvaid lapsi sisaldavatel vanematel on kokkukukkunud kõrgus, mis viib nelikümmend seitsmel erineval viisil probleemi lahendamiseks selgete paranduste ja ülevoolu manipulatsioonide abil.
Õnneks harjub pikemas perspektiivis ujukite taga olevate mõistetega ja need võivad muutuda isegi nii hõlpsaks kasutamiseks, et te ei mõtle neile üldse palju mõtlemist. Ainus asi, mis teie ja selle eesmärgi vahel seisab, on kindel artikkel või kaks, mis tõesti kaevab sisse ja selgitab põhjalikult ujuki käitumist ja tehnikaid.
Vahendid, et teid sinna saada
Kõik, mida te pole kunagi teadnud CSS-i kohta, hõljub
Selles artiklis käsitlen peaaegu kogu CSS-i hõljumitega seotud teemade ringi. Alustatakse põhiaruteluga, mis on ujukid ja kuidas need töötavad. Pärast seda räägin sellest, kuidas ujukid mõjutavad seotud elementide kaste, kuidas ujukid muutuvad imelikeks erineva kõrgusega elementidega, üheksa reeglit, mis hõlmavad ujuki käitumist ja muidugi varisevat kõrgusepaisumist ning kuidas seda parandada.
Kõik ujukite kohta
Chris Coyier on alati olnud mu lemmikautor CSS-iga seotud teemadel ja tema sissejuhatus ujukitesse ei reeda. Kui otsite lühikest, kuid selget arutelu ujukitega töötamise teemal, on see teos teile katteks. Mulle meeldivad eriti lihtsad, atraktiivsed illustratsioonid, mida on kasutatud kogu artiklis.
CSS-i ujukommunikatsiooni mõistatus
Kui Chris Coyieri tükid on tavaliselt lühikesed ja asjasse puutuvad, on Smashing Magazine'i sisu tavaliselt üsna ulatuslik, sisaldades palju näiteid ja vastavat arutelu. See artikkel tutvustab ujukite mõistet, räägib teile kõigest, kuidas neid kasutada ja kustutada ning seejärel alustab aruteluks selle üle, kus näete ujukite kasutamist reaalainete saitidel. Kui peate nägema teooria elluviimist, on see teie jaoks.
3. Tunne oma valijaid
Hea puhta CSS-i kirjutamise üheks võtmeks on tugev ülevaade sellest, millised CSS-i valijad on teile saadaval, kuidas need töötavad ja mil määral neid erinevates brauserites toetatakse. See kõlab nagu piisavalt lihtne teema, kuid tegelikult on CSS-i valijate maailm üsna keeruline.
Siin on palju erinevaid huvitavaid asju, alates atribuudi väärtuse valijate kasutamisest ja märksõnade sihtimisest klasside nimedesse kuni selleni, kuidas universaalne selektor võib teie koodi silumisel abi olla. Isegi kui arvate, et saate isiklikult hakkama ilma hunnikust väljamõeldud valijatest aru saamata, on tõde see, et teised kodeerijad kasutavad seda kraami iga päev ja peate saama aru saada, mida näete, kui vajutad vaateallikale!
Vahendid, et teid sinna saada
CSS-i valijad: lihtsalt keerulised bitid
See on lõbus artikkel, mis võtab vaatluse alla eeskätt CSS-i valijate keerukamad aspektid. Ma jätan vahele maapealse kraami ja hakkan otse arutlema, kuidas DOM-i kontseptsioon tähendab teie dokumendi erinevate aspektide sihtimist CSS-iga. Saate teada kõike laste ja õdede-vendade valimise, selektorite kettide moodustamise ja palju muu kohta.
30 CSS-i valijat, mida peate meelde jätma
Jeffrey Way on veebirakendus ja sellised artiklid tõestavad, miks. See Nettuts + artikkel hõlmab suurt hulka CSS-i valijaid lihtsas ja lühikeses vormingus, milles pannakse palju rõhku brauseri toele. Hämmastaval kombel kodeeris Jeff isegi kolmekümne valija jaoks reaalajas näidislehed.
CSS-i atribuutide valijad: kuidas ja miks peaksite neid kasutama
Atribuudi väärtuse valijad on CSS-i selektorite üks võimsamaid alamhulki ja CSS3 tõepoolest suurendab seda võimsust. Te ei usu, kui mitmekülgseks teie valijad võivad vähese atribuutiväärtusega maagia abil muutuda. Pärast selle artikli lugemist libisete selliste fraaside ümber nagu “suvaline alamstringi atribuudi väärtuse valija” nagu prof.
4. Õppige DRY kodeerimise kontseptsioone
"Ärge korrake ennast." Sellel lihtsal fraasil on kodeerimise osas drastiline mõju. Kui te tõesti DRY kodeerimise tavadesse sukeldute, on tulemuseks puhtam kood, vähem tööd ja ilus uus töövoog, mis on sama võimas, kui see on fantastiline.
Erinevalt teistest ülaltoodud teemadest, mis on üsna kitsad, on see üsna lai teema, mis hõlmab igasuguseid erinevaid tavasid, tehnikaid ja ideid. Huvitaval kombel on üks asju, mis mulle viimasel ajal DRY kodeerimise tavadele keskendub, CSS eeltöötluste kasutamine.
Ehkki paljud väidavad, et eeltöötlejad põhjustavad halva kodeerimise tava, on tegelikkus vastupidine. Ilmselt aitavad eeltöötlejad ise käsitsi kordamist vältida, kuid see ületab seda. Selliste tööriistade nagu LESS ja SASS väljundi ja keelte jaoks üldiselt seatud eesmärkide uurimine on mind pannud kirjutama parema puhta CSS-i! Kui olete omandanud kontseptsioonid nagu @extend Sassis, ei saa te järele mõelda, mis on ainult CSS-iga kodeerimine.
Vahendid, et teid sinna saada
KUIV CSS: ärge korrake oma CSS-i
Selles artiklis tutvustab Steven Bradley DRY CSS-i teemat ning hõlmab selle peamisi põhimõtteid ja eesmärke. Ta juhendab praktikat kolme lihtsa ideeni ja näitab teile, kuidas neid ideid reaalses töövoos rakendada. Mõisted on suures osas laenatud sama teemat käsitleval Jeremy Clarke'i esitlusel.
Sissejuhatus objektorienteeritud CSS-i (OOCSS)
Nagu ma juba mainisin, on DRY CSS-i liikumisele omased ideed üsna kaugeleulatuvad ja otseselt seotud teiste konstruktsioonide kontseptsioonidega. OOCS on üha populaarsemaks muutuv metoodika, mille eesmärk on aidata teil luua kiiremaid ja tõhusamaid stiililehti, millel on parem korraldus ja vähem kordusi. OOCS-is on töös kaks peamist põhimõtet: struktuuri ja naha eraldamine ning mahutite ja sisu eraldamine. See Smashing Magazine'i artikkel tutvustab teile põhilisi ideid ja aitab teil neid oma töös rakendada.
Sissejuhatus SMACSS-i juhistesse CSS-i kirjutamiseks
Kas mäletate Steven Bradleyt esimesest artiklist DRY CSS kohta? Ta kirjutas ka selle tüki, mis selgitab projekti, mis sarnaneb OOCSiga, kuid on sellest eraldi: SMACSS (Jonathan Snooki projekt). Nagu OOCSSil, on ka SMACSSil kaks peamist eesmärki. Esimene on HTML-i lõigu ja sisu semantilise väärtuse suurendamine ning teine - konkreetse HTML-i struktuuri ootuse vähendamine. See artikkel selgitab üksikasjalikult mõlemat eesmärki ja pakub kasulikke koodinäiteid, nii et näete SMACSS-i toimimas.
5. Tunnege oma brauseri tuge
Viies ja viimane CSS-i parendamise võti on teada, mis töötab. CSS3 on enamusele meist liiga ahvatlev, et seda ignoreerida, kuid kõva tõde on see, et terve hunnik seda ei tööta teatud brauserites (“teatud brauserite” all pean ma muidugi silmas IE).
Suur saladus, mida algajate veebiarendajad peavad pähe saama, pole see, et nad peavad meelde jätma iga CSS-i funktsiooni ja selle, kuidas iga inimesele teadaolev brauser seda käsitseb, selle asemel, et teile on saadaval täiesti hämmastavad ressursid, mis annavad teile selle teabe. vabalt, peate lihtsalt teadma, kust otsida.
Vahendid, et teid sinna saada
Naelutatava brauseri tugi CSS3 ja HTML5: hindamatu ressurss täna kasutamiseks
Selles artiklis tutvustan teile suhteliselt vähe saite, mille brauseri toe kontrollimiseks olen järjehoidjatesse lisanud. Need ressursid on fantastilised, visuaalsed ja annavad teile vajaliku teabe, et saaksite kodeerimise juurde naasta. Vaadake, millised nad on!
CSS3 brauseri tugi: mis on praegune olek?
See artikkel on kirjutatud üle aasta tagasi, nii et tükk “praegune staatus” on vaieldav, kuid selle aja jooksul pole muutunud piisavalt, et muuta selles artiklis sisalduv teave aegunuks. See on uskumatult kasulik ülevaade erinevatest CSS3 atribuutidest, mis jaguneb jaotisteks vastavalt sellele, mis kõikjal töötab ja mida peate jälgima. Selle läbimine võtab vaid mõni minut ja see on lugemist väärt.
Brauseritevahelise ühilduvuse olulisus: näpunäited ja ressursid
Kui olete CSS-i uus inimene ja vajate brauseri ühilduvuse teema põhitutvustust ning miks see on oluline, leiate sellest Noupe'i artiklist. Lisaks lihtsalt ühilduvuse idee müümisele loetleb see hunniku suurepäraseid ressursse, mida saate kasutada maksimaalse ühilduvuse tagamiseks. Eriti huvitav on tööriistade loetelu, mis aitavad teil oma saiti testida erinevates brauserites.
Kas ma peaksin seda kõike 24 tunni jooksul läbi lugema?
Olen esitanud teile viis uurimist vajavat absoluutselt kriitilist teemat ja vähemalt viisteist artiklit, millest saate teada põhimõtteid, mida peate teadma. See kõik on hästi ja hästi, kuid lubasin oma pealkirjas, et saate ühe päevaga paremaks ja kõigil pole aega istuda ja lugeda viisteist pikka artiklit!
Hea uudis on see, et ma andsin teile iga teema kohta kolm artiklit, nii et teil oleks valida mõne valiku vahel. Selgitasin üksikasjalikult iga sisu, et saaksite valida oma vajadustele kõige paremini vastava. Ärge unustage, et valite artiklid, mida lugeda, mitte selle põhjal, mida te teate, vaid selle põhjal, mida te ei tea. Pange eesmärk oma teadmiste lünkade täitmine.
Minu soovitus on sirvida ülaltoodud sisu ja valida viis artiklit (üks igast jaotisest). Isegi see on päevas palju ära teha, kuid enamus neist pole üle tuhande sõna või liiga palju, palju vähem. Olen kindel, et saate selle ära tõmmata. Kui ei saa, pole probleemi. Muutke oma eesmärki parandada oma CSS-i oskusi nädala jooksul ja lugege järgmise viie päeva jooksul iga päev ühte viiest valitud artiklist. Ma garanteerin, et tuleval nädalal on teil palju parem kirjutada selge, lühike, ühilduv ja korduvkasutatav CSS.
Milliseid muid kontseptsioone te soovitate?
Nüüd, kui olete lugenud minu viit peamist teemat, mida inimesed peaksid oma CSS-oskuste parandamiseks kasutama, tahan ma sinust kuulda. Milliste muude teemadega CSS-kodeerijad teie arvates tavaliselt hädas on ja milliseid ressursse soovitate kõigile, kes soovivad rohkem teada saada?
Laos olevad fotod pakutakse BigStocki viisakalt
