Geresnio CSS rašymo vadovas

Geresnio CSS rašymas nebūtinai turi būti kruopštus išbandymas. Keli nedideli CSS kodo failo pakeitimai gali turėti didelę įtaką. Šiame straipsnyje apžvelgsime aštuonis paprastus būdus, kaip patobulinti savo CSS įgūdžius ir parašyti švaresnį, efektyvesnį ir geresnį CSS kodą.

01. Pradėkite nuo CSS Reset

CSS Reset suteikia jums švarų pagrindą dirbti



CSS Reset suteikia jums švarų pagrindą dirbti

Kai kurie gali teigti, kad naudojant a CSS Reset yra nereikalingas. Tačiau „CSS Reset“ leidžia jums pradėti nuo švarios bazės, kad būtų lengviau kurti savo svetainę, o rezultatai būtų labiau nuspėjami.



CSS Reset atstato arba pakeičia numatytuosius naršyklės stilius. Galite rašyti savo, naudoti vieną iš daugelio internete galimų atstatymų arba naudoti jų derinį.

02. Žinokite, kada naudoti CSS trumpinį

Stenografija turėtų sumažinti failo dydį ir pagreitinti įkėlimo laiką



Stenografija turėtų sumažinti failo dydį ir pagreitinti įkėlimo laiką

CSS stenografija leidžia nustatyti kelias elemento ypatybes vienoje eilutėje. Jei naudojate stenografiją, sutaupoma vietos ir įkeliama mažiau laiko. Tačiau neturėtumėte jo naudoti viskam.

Kartais rankos ilgis suteikia labai reikalingo aiškumo. Bet dar svarbiau, kai jums reikia nustatyti tik vieną ar dvi savybes - arba tiesiog reikia ką nors nepaisyti - iš tikrųjų ilgakojis gali būti geresnis.

Ką nors atsiminti: kai naudojate trumpinį, ignoruojamos savybės bus atstatytos, o tai gali turėti nepageidaujamą poveikį.



kokia svarbi vaizdo plokštė vaizdo redagavimui

03. Laikykite sausai

Don

Nekartok savęs

Geriausias patarimas, kaip parašyti geresnį CSS kodą, yra DRY metodikos laikymasis. DRY reiškia „nekartok savęs“ - iš esmės nenaudok tų pačių kodo bitų vėl ir vėl.

Vienas iš būdų, kaip išlaikyti CSS dalykus, yra grupuoti dalykus. Pažvelkime į pavyzdį.

Originalus CSS

.menu li { color: red; } .menu li a { color: red; }

Pertvarkytas ir sausas

.main li, .main li a { color: red; }

Kaip matote, tai ne tik sumažins bendrą jūsų CSS failo dydį, o tai leidžia greičiau įkelti, bet taip pat turėsite naudos ir priežiūros srityje. Jei spalva turtą reikia atnaujinti, jūs atnaujinate tik vieną vietą.

Taip pat galite naudoti pasirinktines CSS ypatybes, kad išliktumėte DRY. Tinkintos ypatybės sukuriamos taip:

:root { --primary-color: red; }

Tada galite naudoti bet kur savo CSS kode, taip dažnai, kaip norite:

.main li, .main li a { color: var(--primary-color); }

04. Nustok per daug naudoti! Svarbu

Yra labai nedaug atvejų, kai jums reikia naudoti ! svarbu . Tai viena iš labiausiai - jei ne labiausiai - neteisingai suprastų ir per daug panaudotų deklaracijų.

Nesupraskite manęs neteisingai, ! svarbu tikrai turi savo vietą, tačiau paprastai interneto kūrėjai naudojasi beviltiškai, kai viskas atrodo ne taip. Taigi, norėdami išspręsti reikalus, jie suteikia savo taisyklei šiek tiek daugiau svorio pridedant ! svarbu deklaracija jai.

Problema ta, kad tai pradeda kurti domino efektą, kuris greitai virsta priežiūros košmaru, nes deklaruojama vis daugiau dalykų ! svarbu . Tik naudoti ! svarbu kai tai tikrai būtina.

05. Laikykitės nuoseklumo

Nepriklausomai nuo to, kaip rašote savo CSS ir kokia tvarka pridedate ypatybes, išlaikykite ją nuosekliai. Kai kurie žmonės savo ypatybes sutvarko abėcėlės tvarka, o kiti taiko labiau logišką požiūrį - pavyzdžiui, tvarkydami daiktus pagal linijos ilgį ar tipą. Aš renkuosi pirmąjį, bet tai priklauso tik nuo jūsų. Esmė yra tai, ką pasirinksite, laikykitės to, kad vėliau būtų lengva rasti daiktus.

06. Protingai įvardinkite dalykus

Pasirinkėjams naudokite standartinę vardų suteikimo tvarką

Pasirinkėjams naudokite standartinę vardų suteikimo tvarką

Atrodo, kad tai nieko nereikia, tačiau, įvardindami savo atranką, nesudėkite pernelyg daug problemų. Būkite trumpas ir laikykitės standartinės pavadinimų suteikimo tvarkos.

Keletas dalykų, į kuriuos reikia atsižvelgti sugalvojant pasirinkimo elementų pavadinimus:

  • Venkite pateikimo žodžių: Tai yra spalvos ir ekrano vieta (pvz., žalias tekstas arba viršutiniame meniu-juostoje )
  • Naudokite tik mažąsias raides: CSS skiria didžiosios ir mažosios raidės, todėl nekurkite tokių pavadinimų kaip, MeNuBaR . Tačiau reikia pažymėti, kad kupranugarių atvejis ( meniu juosta ) yra priimtina praktika, tik kai kuriais atvejais ji nėra pageidaujama
  • Atskirkite kelis žodžius brūkšneliu: Pavyzdžiui, Pagrindinis meniu . Taip pat galite naudoti kupranugario dėklą ( Pagrindinis meniu ), bet vėlgi, tai nėra pageidaujama
  • Nebūkite per daug konkretūs: Galų gale naudosite kelis to paties tipo elementų selektorius. Pavyzdžiui, sąrašas vienas ir sąrašas-du galima sujungti, sukuriant vieną sąrašo elementai

07. Prireikus pridėkite komentarų

Tiesa, kad geram kodui komentarų nereikia, tačiau kai kuriais atvejais komentarus pridėti prie kodo būtina. Čia galioja taisyklė: jei komentaras naudingas šaltinio kodui, tada pridėkite jį; kitaip - ne.

Jei įdomu, kada gali prireikti komentarų, pateikiame keletą pavyzdžių:

  • Komentuojamas kodas: Jei dėl konkrečios priežasties pakomentuojate tam tikrą kodo dalį, palikite komentarą, paaiškinantį tą priežastį. Jei to nepadarysite, galbūt neprisiminsite, kodėl iš pradžių tai komentavote
  • Karšti pataisymai: Jei pridėsite „karštų pataisų“ variantą, gali būti naudinga pridėti ir komentarą, kuriame būtų paaiškinta
  • Priminimai: Tikėtina, kad bet kuriuo metu dirbate su daugiau nei vienu projektu. Jei jūsų dėmesys bus atkreiptas, kol dar neturite galimybės ką nors užbaigti, galite naudoti komentarus kaip priminimą tam, ką dar turite padaryti
  • Paaiškinimai: Jei kodo dalis yra neaiški ir manote, kad paaiškinimas padėtų ją išvalyti, pridėkite komentarą - taip paprasta

08. Naršykite „Flexbox“

kaip padaryti padirbtą iPad
„Flexbox“ yra naujausias interneto dizaino dizainas

Kalbant apie elementų sulyginimą puslapyje, „Flexible Box Layout“ modulis (arba „Flexbox“) suteikia jums visišką valdymą. Naudodami lanksčius konteinerius ir lanksčius daiktus, galite tiksliai apibrėžti, kaip viskas atrodo. „Flexbox“ taip pat leidžia vertikaliai išdėstyti elementus puslapyje, o tai nebuvo įmanoma naudojant plūdes.

Galvą sukti šiek tiek keblu, bet verta. Pradėkite skaitydami mūsų Tinklo dizainerio vadovas „Flexbox“ .

Skaityti daugiau: