Vastus küsimusele “Kuidas CSS-iga hea saada”

Vihje - see on harjutamine, aga ka ülevaade suuremast pildist.

Tõenäoliselt olete juba Quorast kuulnud, see on üsna kena platvorm teadmiste saamiseks ja jagamiseks. Aktiivseid kategooriaid on sadu, kus saate küsida ja vastata kõigele, mis teile meelde tuleb.

Üks sagedamini esinevaid küsimusi, mida ma näen, on asjade suurem pilt. Kuigi küsimuste-vastuste kontseptsioon sarnaneb StackOverflow kontseptsioonile, on küsimuste ja vastuste olemus erinev.

Head küsimused ja täpsemini - Quora vastused ei asu ridades „Kuidas panna mind taustaks kleepimise ajal kleepima“ või „Kuidas oma nupule pehmeid piire seada“. Ärge saage minust valesti aru, selliseid küsimusi on, kuid need pole eriti väärtuslikud.

Huvitav on aga teema „Kuidas saada kiiresti kiiresti läbi” või „Kuidas oma koodi korraldada”. Teatud tüüpi küsimused, mis pole StackOverflow'is just nii teretulnud, nagu ilmselt teate, kuna need pole piisavalt täpsed.

Ja see on siin minu eesmärk - vastata lihtsale küsimusele “Kuidas saada heaks”. Ma ei süvene tehnilistesse üksikasjadesse, kuna need pole olulised.

Mõista mõisteid

See on oluline. Haarake suuremast pildist.

Tõenäoliselt teate, mis on taustavärv, võiksite teada, mida transformX teeb, ujuk, flexbox ja ruudustik. Nende kohta saate lugeda, kuidas kasutada ja rakendada. See pole raske osa. (+ abiks on google.)

Kuid enamik inimesi vaevab seda, kuidas kõik on üksteisega ühendatud. Miks tehakse mõned otsused ja miks inimesed armastavad oma raamistike leiutamist ja tavade nimetamist.

Peate mõistma, et see, kuidas alustate, määratleb enam-vähem kogu projekti struktuuri. Seetõttu peate veenduma, et olete potentsiaalsetest probleemidest teadlik ja kuidas neid lahendada.

Esiteks alustame sellest, kuidas põhialused korralikult alla saada.

Seal on palju CSS-i atribuute. Te ei tohiks minna ja neid kõiki meelde jätta. Lehte ennast nimetatakse “viiteks”. Te ei käi koolis, keegi ei küsi, et nimetaksite kõik piiriseaded, mille saate oma stiililehe kaudu seada.

Kuid te mäletate neid pärast nende lugematu arv kordi kasutamist. Kui te pole kindel, kuidas midagi kasutada - Google seda. Seejärel kirjutage see ise, mängige seadetega ringi ja vaadake tulemust.

Pärast mõnekuist rasket tööd on see nagu emakeeles kirjutamine.

See on oluline, sest sageli peate kiiresti kohale toimetama. Seda nõuab projektijuht / juht teilt. Põhiomadusi ei tohiks te väga otsida.

Enamiku omaduste tundmine suurendab ka silumisvõimet. Teades, kuidas iga vara töötab ja kas see on olemas, säästate palju aega. Seetõttu saavad kogenud arendajad paljude probleemidega mõne minutiga hakkama.

https://xkcd.com/1350/

Peate kirjutama palju koodi

Selle ümber ei saa kuidagi olla. See on sama mis kõige elus, peate sellele palju aega panema. Ja siin peitub üks peamisi küsimusi, mida ma näen, kui inimesed küsivad, kuidas paremaks saada.

Mida täpselt kirjutada?

Kui töötate agentuuris või vabakutselisena, siis on teil kõige tõenäolisem, millega töötada, kuid kui mitte, siis siin on mõned näpunäited:

Vaata, kuidas suured poisid seda teevad

Kui see on esimene, on teie käsutuses tõenäoliselt palju aega. Ja see on hea, see tähendab, et võite vabalt teha kõike, mida soovite.

Ja see tundub fantastiliselt, paljud kadestavad teid.

Kui jah, siis toimige järgmiselt: minge saidile, mida imetlete. Boonuspunktid, kui see on suure liiklusega. Alustage elementide kontrollimist, vaadake, kuidas insenerid on konkreetseid komponente / paigutusi rakendanud.

Mõned juhised otsimiseks:

  • Kas nad kasutasid mõnda konkreetset nimetamise tava? Sellistel ettevõtetel nagu Airbnb, BBC jt on avalike koodide juhised, saate neid otsida.
  • Kas nad kirjutavad palju koodi üle? Vaadake, kui palju atribuute konkreetne klass kirjutab. Mida vähem - seda parem, vaadake, kuidas nad selle saavutasid.
  • Kuidas midagi tegelikult saavutati? Lihtne tekst vasakul ja pilt paremal võib osutuda väga keerukaks, kui pilt hõljub saidi konteineris väljastpoolt, see kleebitakse sektsiooni põhja ja kattub ülaosaga, samal ajal kui tekst on vertikaalselt keskelt ja kogu see on reageeriv.
  • Leidke erinevus nende koodi ja teie koodi vahel. Kas kasutate rohkem ujukit, rohkem positsioneerimist, rohkem häkke? On väga tõenäoline, et selle, mida teete iga päev, saab kirjutada palju lihtsamal viisil.

Kuid kõik see muutub igavaks. Ainult lugemisega ei saa hea olla, peate midagi tegema. Ja siin saate teha iga kord:

Proovige siis seda ise teha

Näiteks avatud sõmer. Seal on lihtsalt nii palju vingeid kujundusi! Mida sa nendega teed? Rakendage need. Valige lihtne ja proovige muuta kõik ekraanil täiuslikuks.

Miks? Sest see näeb hea välja ja tunnete end suurepäraselt, kui näete, et see töötab.

Lihtsalt ärge kasutage seda nii, nagu see oleks teie enda disain, see ei saa olema lahe. Hoidke seda oma kohalikus dev keskkonnas või kirjutage disainerile, kui soovite sellega midagi ette võtta.

Vaata seda aadressil: https://dribbble.com/shots/3466131-Prism-Web-Theme-Template-designerbundle-com

Seejärel vali disainerite tehtud töö, mis ei arva arendajatele head. Üks, kus kõik kattub kõikjal, kus ruudustik on võõrkeelne sõna, mis kirjeldab vaala kaalu banaanides ja värvuse konsistentsi, on hipsterite kasutatav termin.

Miks? Sest see on raske. See paneb teid palju rohkem mõtlema, kuidas oma märgistusi ja stiile korraldada. Proovige saada piksel täiuslikuks! Boonuspunktid animatsioonide eest.

Või kui olete ka disainer, kasutage nende kodeerimiseks oma disainilahendusi. See on ka suurepärane tava. See on ka see, mida ma tegin, kui paar aastat tagasi oma League of Legends'i meistrite valikukraani ümber kujundasin.

Valmistatud vähem kui kahe tunniga, kodeeritud umbes 6 tunni jooksul, samal ajal kui seda otse voogesitatakse.

Rakendatud versiooni näete siin. See ei reageeri, kuna see ei kuulunud esialgsesse kavasse. Samuti saate vaadata kogu protsessi ajalõpu salvestust.

Vaadake oma kood üle

See pole mitte ainult teie tehtud töö maht, vaid ka kvaliteet. Vaadake oma vana kood uuesti läbi ja otsige võimalikke parandusi.

Mis pani teid selle osasid ümber kirjutama? Mis pani teid hirmutavat lisama? Kas nägid vaeva meediapäringutega? Kas kirjutasite 4–5 taseme sügavvalijaid?

Otsida on palju parimaid tavasid. Siin on vaid mõned neist:

  1. 20 protipoti moodsa CSS-i kirjutamiseks
  2. CSS-i modulaarsed nimetamismeetodid
  3. Või see tohutu juhend peaaegu kõige CSS-i jaoks.

Paremate vahendite saamiseks kiiremini, tõhusamalt ja vähem vigadeta töötamiseks. Peaksite proovima oma lehe esimest korda korda teha, ilma et peaksite koodi osi ümber kirjutama, muutma või kustutama.

Peaksite algusest peale ette planeerima!

Kuidas komponendid üksteisega hakkama saavad? Mis on pesastatud, mis pärib stiile?

Peate õppima hästi planeerima

See on ülioluline. Algusest peale, kui vaatate pakutavaid makette, prototüüpe või kujundusi, peate kavandama oma paigutuse ja märgistuse struktuuri.

Mis on elemendid, kus neid kasutatakse rohkem kui üks kord. Kas nad on kuidagi erinevad? Kas need erinevad samade reeglite järgi?

Kõik see annab teile teada, milliseid modifikaatoreid vajate, kuidas oma märgistust struktureerida nii, et saaksite seda võimalikult palju uuesti kasutada.

Pange tähele “silumise” ja “ümbermõtestamise osa” :) Ja jah, super nutika automatiseerimisriista leiutamise asemel proovige kõigepealt kõike optimeerida. Just siis mõelge vajadusel automatiseerimise peale. - https://xkcd.com/1319/

See planeerimine säästab hiljem teie aega ja raha. Mida rohkem projekt kasvab, seda olulisem on hea alus. See on midagi, mida te väikeste projektidega ei õpi.

Ja kui teil pole raskusi suurema kooditabeli säilitamisega, kus paljud selle kallal töötavad inimesed, peaksite kindlasti uurima kogu projekti ulatust ja kavandama korralikult, kuidas kõike struktureerida.

Suurema osa sellest sorteerimiseks on teised arendajad välja pakkunud nimetamistava. Reeglite komplekt, kuidas nimetada oma komponente, nende alamelemente, modifikaatoreid, utiliite ja nii edasi.

Ja igaüks neist on heaks kasutamiseks erinevates projektides. Kuid kui teate ulatust ja piiranguid piisavalt hästi, saate valida oma projekti jaoks parima.

  • Jällegi sassi ajaveebi modulaarsed nimetamismeetodid
  • Sissejuhatus objektorienteeritud CSS-i (OOCSS)
  • SMACSS
  • BEM
Mis tunne on CSS-iga vaeva näha, kui midagi pole korraldatud. Üha enam ja rohkem omaduste ülekirjutamine, kohandamine, muutmine ja lisamine põhjustab enamasti jama, mis puruneb kergesti.

Neid on palju teisigi, peaksite leidma selle, mis teie vajadustele kõige paremini sobib. Kuid ma soovitan teil lugeda dokumente, põhjust ja probleeme, mida need konventsioonid lahendavad.

Võib-olla ei kasuta te ühtegi neist, kuid on oluline teada nende olemasolu põhjust.

TL; DR

  • Kirjutage võimalikult palju CSS-i. Kui te ei leia häid projekte, mille kallal töötada, haarake disain kuskilt ja rakendage see.
  • Täiustage oma koodi iga kord. Proovige õppimise ajal iga komponenti iga kord nutikamalt kirjutada, kuni olete oma lähenemisviisiga pikemas perspektiivis rahul.
  • Õppige suurte poiste käest - vaadake, kuidas suuremahulised saidid seda teevad. Vaadake, mida saate sealt õppida, ja rakendage seda oma projektides.
  • Kasutage või vähemalt mõistke, miks nimetamiskonventsioonid on olemas. Tea, milliseid probleeme nad lahendavad. Otsustage, milline neist on teie projekti jaoks parim.

CSS tundub lihtne, kuid valesti minna võib just nii palju. Pärast 5000 liinist möödumist võivad asjad tõesti segaseks minna. Halb planeerimine paneb teid asjad üle kirjutama, ootamatutes kohtades vallanduvad valed meediumipäringud, reageerivad reeglid võivad muutuda õudusunenäoks.

Paremaks muutmiseks peate kõigi nende probleemide kohta palju lugema, tuvastama need oma koodi järgi ja kavandama, kuidas oma rakendust / saiti struktureerida, et te ei peaks nende pärast kõigepealt muretsema.

Kui teile see artikkel meeldis, ärge unustage vajutada allpool olevat südameikooni.