5 populiariausi CSS įrankiai interneto kūrėjams ir dizaineriams

CSS nuėjo ilgą kelią, tačiau iki šiol įrankių aplink ją nebuvo.


Jei manote, kad CSS rašymas yra tarsi kova su pabaisomis deguto duobėje, nesate vienas. CSS yra viena iš svarbiausių interneto maitinimo technologijų, tačiau ji nėra tinkama programavimo kalba ar sistema per se. Dėl to, kai tik jūsų projektas tampa vis akivaizdesnis, taip pat ir netvarka – atrodo, kad atrankos taisyklės yra visur, ir sunku rasti, kas yra kur; kai į savo puslapius įtraukiate šriftus, išorinę CSS, JS ir kitą išteklius, atrodo, kad galutinis paketo dydis išauga iš rankų, ir jums įdomu, kur pasiklydo greito, patogaus vartotojui skirto sąsajos idealai..

Bet tai nebūtinai turi būti tokia. Šiandien įrankiai aplink CSS išsivystė į tokį lygį, kad darbo eigą galima ne tik sutramdyti, bet ir paversti malonia. Šiame straipsnyje kalbėsiu apie penkis tokius CSS įrankius, kurie mano darbe yra nepaprastai vertingi. Sąmoningai vengiau naudoti žaislų įrankius, tokius kaip CSS generatoriai, meniu generatoriai ir pan., Nes jie sukuria daugiau problemų nei išsprendžia..

Artėja CSS traukinys! Eime! �� ��

„PostCSS“

Jei jums patinka „JavaScript“, jums patiktų idėja, kurią dabar galime įtraukti ir valdyti CSS naudodami „JavaScript“. Ir tai yra būtent tas sugebėjimas „PostCSS“ teikia.

Tačiau tai nėra tik „JavaScript“ pagrindu pagamintas sintaksės cukrus, palyginti su CSS. „PostCSS“ suvynioja kelis galingus paketus / funkcijas kartu, todėl dirbant su CSS darbo eiga tampa daug malonesnė ir lengvesnė. Pavyzdžiui:

  • Pardavėjo prefiksai automatiškai pridedami atsižvelgiant į tai, kokią nuosavybę naudojate.
  • Galimybė aptikti, kurias CSS funkcijas galima naudoti dabartinėje naršyklėje.
  • Naudojant būsimus, dar išleistus, tačiau labai galingus CSS sintaksės atnaujinimus.
  • Patogus tinklelis, kuris yra kiek įmanoma lankstesnis.

Manau, kad neteisi teisingumo „PostCSS“, jei neįtrauksiu tinklelio pavyzdžio. Taigi čia mes einame. Kažkas tokio paprasto:

div {
prarastas stulpelis: 1/3
}

paverčiama pilnaverte CSS sistema, beveik visais kraštiniais atvejais rūpinantis:

div {
plotis: apskaičiuota (99,9% * 1/3 –
(30 taškų – 30 taškų * 1/3));
}
div: n-tas vaikas (1n) {
plūdė: kairė;
dešinė paraštė: 30 taškų;
aišku: nėra;
}
div: paskutinis vaikas {
paraštės dešinė: 0;
}
div: n-tas vaikas (3n) {
paraštės dešinė: 0;
plūdė: dešinė;
}
div: n-tas vaikas (3n + 1) {
aišku: abu;
}

Kadangi „PostCSS“ yra JS pagrįstas dalykas, jį nėra tiksliai lengva nustatyti, ypač jei esate dizaineris ir nelabai turėjote reikalų su moduliais, segtuvais ir apskritai npm pasauliu. Vis dėlto „PostCSS“ potencialas jūsų darbe yra didžiulis ir neturėtų būti ignoruojamas.

„PurgeCSS“

Ar jums patinka moderni fasadų rėmais pagrįsta darbo eiga, bet ar nusivylėte, kad jie perneša per daug bagažo? Jei taip, „PurgeCSS“ yra jūsų draugas, bent jau atsižvelgiant į CSS.

Tiems, kurie galbūt nežino, kas yra didžioji problema: čia yra greitai atmesta. Kai kuriate vieno puslapio programas, naudodami sąsajos pagrindus, tokius kaip „React“, „Angular“, „Vue“ ir kt., Jūs einate į vadinamąjį „kūrimo procesą“. Iš esmės visus CSS, JS, SASS ir kt. Koduojate atskirais failais (sutvarkykite juos taip, kaip jums atrodo intuityviausia), tačiau kai tik tai padarysite, liepiate jungtukui „sukonstruoti“ daiktą. Tai reiškia, kad perskaitysite visą jūsų parašytą šaltinio kodą, pritaikykite tam įvairius filtrus (minifikacija, obfuzija / uglifikacija ir tt) ir išsklaidykite išvestį į vienus failus, paprastai „JavaScript“ naudodami „app.js“, ir „App.css“ visoms CSS. Šie failai, kartu su liesu „index.html“, yra viskas, ko jums reikia norint paleisti programos priekinę dalį. Trūkumas yra tas, kad kadangi viskas įtraukiama į šiuos galutinius failus, jų dydis dažnai viršija tai, kas leistina greitam reagavimo laikui; Pvz., nėra neįprasta pamatyti „app.js“, didesnį nei 500 KB!

„PurgeCSS“ pridedamas kaip jūsų kūrimo darbo eigos dalis ir neleidžia nenaudojamai CSS būti sujungtai į galutinę išvestį. Įprastas naudojimo atvejis yra „Bootstrap“: tai vidutinio dydžio biblioteka su keliomis UI klasėmis, skirtomis skirtingiems komponentams. Jei jūsų programoje naudojami, tarkime, 10% „Bootstrap“ užsiėmimų, likę 90% yra vieninteliai jūsų paskutinio CSS failo pliūpsniai. Tačiau „PurgeCSS“ dėka tokius nenaudojamus CSS failus galima atpažinti ir užkirsti kelią kūrimo procesui, todėl gaunami daug mažesni galutiniai CSS failai (5-6 kartus mažesnis dydis yra gana normalu)..

Taigi, eik į priekį, „išvalyk“ nereikalingą CSS naudodamas „PurgeCSS“! ��

Galinis vėjas

Galinis vėjas yra CSS sistema, tačiau ji prieštarauja tokiems principams, kad aš galvojau, kad įtrauksiu ją čia į CSS įrankius. Jei nekenčiate vidinio CSS (kas to nedaro ?!), „Tailwind“ greičiausiai privers jus atsitraukti iš siaubo pirmą kartą susidūrus su juo. Gaukite pirmąjį skonį pažvelgdami į tai, kaip galite koduoti tipinę formą naudodami „Tailwind CSS“:

Vartotojo vardas

Slaptažodis

Pasirinkite slaptažodį.

Prisijungti


Pamiršote slaptažodį?

© 2019 „Acme Corp.“ Visos teisės saugomos.

„Tai pokštas ar kas ?! Kas yra tos erzinančios mažos klasės? Atidžiau apžiūrėjus, kodėl gi aš galiu nustatyti paraštes, polsterį ir spalvą tiesiogiai kartu su HTML? Ar tai 2019 ar kas? “

Tikėtinos tokios mintys. Aš žinau, nes jaučiausi taip pat ir iškart uždariau „Tailwind“ dangtį. Tik vėliau susiradau transliaciją, kurioje svečias perdarė madingą, padoraus dydžio svetainę „Tailwind“ ir ėmiau atkreipti dėmesį..

Prieš judėdami toliau, pagalvokite apie šiuos klausimus:

  • Ar pavargote įsiminti standartines pagrindų klases ir jų funkcijas, kad galėtumėte pritaikyti savo dizainą pagal savo skonį? Puikus pavyzdys yra „Bootstrap“ naršymo juostos išvaizdos ir elgsenos keitimas.
  • Ar manote, kad tokios populiarios struktūros kaip „Bootstrap“ yra perdėtos ir stengiasi padaryti daug daugiau, nei turėtų?
  • Ar jums atrodo, kad maišote rėmus, nes norite geriausio iš visų pasaulių?
  • Ar jums patinka labiau valdyti savo dizainą ir vis dėlto jums atrodo didžiulė „vanilės CSS“ patirtis?

Jei atsakymas į kurį nors iš šių klausimų yra „taip“, jums reikia „Tailwind“. Dabar pažvelkime, kas yra „Tailwind“ ir ką jis veikia.

„Tailwind“ yra tai, kas vadinama pirmąja naudingumo CSS, kuri skiriasi nuo to, ką darome savo kasdienėse darbo eigose: semantinė CSS. Skirtumas tarp semantinio CSS ir naudingojo CSS yra tas, kad pirmasis bando sugrupuoti stiliaus elementus pagal puslapyje pateiktų vaizdinių skyrių pavadinimą. Taigi, jei puslapyje yra naršymo meniu, kortelės, karuselė ir kt., Semantinis būdas atlikti veiksmus būtų CSS stiliaus taisyklės sugrupuojamos tokiose klasėse kaip .nav, .card, .carousel ir kt. jų poskyriai pažymėti atitinkamai (pavyzdžiui, .card-body, .card-footer ir kt.). Tai yra iki šiol labiausiai paplitęs požiūris į CSS, ir mes visi esame su juo susipažinę tokiose sistemose kaip „Bootstrap“, „Foundation“, „Bulma“, UI rinkinys ir kt..

Kita vertus, CSS pavadinimų rašymo „naudingumo“ stilius tiksliai pagal jų funkciją: klasė, kontroliuojanti viršutinę ir apatinę kraštines, bus pavadinta kaip .margin-y-medium ir gali būti pritaikyta bet kurioje HTML vietoje. žymėjimas ten, kur reikalinga ši paraštė. Nors tai šiek tiek supažindina su klasės vardo šliaužimu (tereikia greitai peržvelgti kodą, kurį anksčiau dalijausi anksčiau, arba ekrano kopijoje – tiek daug klasių!), CSS tikslas yra visiškai aiškus: nereikia peršokti. pirmyn ir atgal tarp dokumentų, CSS ir HTML, kad išsiaiškintumėte tinkamus pavadinimus ir tinkamą efektą.

Tai labai išlaisvinantis darbo būdas, tačiau taip pat yra ir prakeikimo: CSS pagrindai turi būti tvirtai vietoje (įskaitant tokias modernias koncepcijas kaip „Flexbox“). Taip yra todėl, kad „Tailwind“ jokiems jūsų puslapio komponentams neteikia jokių stilių, ir jūs turite sukurti stilius iš nurodytų elementų. Kita problema yra sąranka: „Tailwind“ leidžia sugrupuoti keletą CSS klasių į vadinamuosius komponentus, tačiau tai daroma naudojant „JavaScript“ ir reikalingas modulio įkėlėjas ir kaupiklis, pvz., „Webpack“.

Viskas, pasakyta ir padaryta, „Tailwind“ yra poliarizuojantis, ryškus naujas stiliaus atlikimo būdas ir patiks tiems, kurie trokšta didesnio paprastumo ir kontrolės.

Saas

Nors Sass buvo jau seniai, aš jį įtraukiau čia, nes kūrėjai vis dar nežino, koks jis naudingas. Stilistiškai nuostabūs stiliaus lapai (arba SASS) yra CSS superkomplektas, kuris buvo sukurtas siekiant sutramdyti beprotybę, kylančią iš roplių, kai CSS išaugs už kelių eilučių..

Pavaizduokite tai: jūs nuėjome ilgą kelią rašydami CSS savo projektui. Naudojate kelias spalvas, supratote įvairias skirtybes, šriftų stilius ir pan. Išskyrus tai, kad dabar supranti, kad ne viskas taip gerai kabinasi. Galbūt norėtumėte išbandyti didesnes visų skyrių, kortelių ir mygtukų paraštes. Na, o kas dabar? Vienos galvos skausmui užtenka net pačios idėjos, kad reikia ieškoti-pakeisti per savo milžinišką CSS failą. Mes visi tai padarėme ir visi žinome, kokia klaida tai daro. Sass išsprendžia šią problemą įvesdamas kintamuosius:

Rašydami HTML, mes įterpiame elementus kituose elementuose. Bet rašydami CSS turime parašyti vienodą taisyklių hierarchiją, dėl kurios sunku psichiškai CSS pritaikyti HTML. Naudodami „Sass“ galite imituoti puslapio struktūrą savo stiliaus failuose:

Visa tai net nepradėjo subraižyti „Sass“ siūlomų gėrybių paviršiaus: modulinis dizainas, failai, mišiniai, paveldėjimas. . . sąrašas tęsiasi ir toliau. Aišku, jūs turėsite išmokti „Sass“ kompiliatoriaus darbo eigą ir įtraukti ją į savo, tačiau, mano manymu, šios praleistos valandos yra investicija, už kurią daugiau ir daugiau atsipirksite.!

CSS Linters

Kadangi interneto svetainių kūrėjai (ir UI kūrėjai – nors man įdomu, kuo skiriasi šie du terminai use) naudoja paprastus teksto redaktorius – arba, kaip šiais laikais, koduokite tiesiai iš „Chrome dev“ įrankių – jie retai išgirsta apie arba naudojasi šia pamušalas. Kita vertus, programuotojai, kurie naudojasi gerais teksto redaktoriais, tokiais kaip „VS Code“, „Sublime Text“ ar kitomis IDE, šį įrankį žino labai gerai, nes tai yra antra jo prigimtis. Bet kokiu atveju, jei esate vienas iš tų CSS kūrėjų, kurie paskendę nepatogioje CSS, jums gali būti naudinga dėl sąsajos.

Paprasčiau tariant, linteris yra programa, tikrinanti jūsų kodą, ar nėra klaidų ir neatitikimų. Tai ji daro naudodamasi nustatytų taisyklių rinkiniu, kad išsiaiškintų, kas negerai ir kas nenuosekli. Geros sąsajos integruotos su IDE ir kodų redaktoriais ir gali būti sukonfigūruotos vykdyti kiekvieną kartą, kai išsaugote šaltinio failą. Jie taip pat padeda jums peržiūrėti spalvas, padaryti klaidas ir automatiškai užpildyti kuriant CSS failus:

Bet čia yra geriausia dalis – jei vadovaujatės tam tikru CSS stiliumi ir formatu, galite paversti sąrašu savo malonumą. Tai užtikrins, kad CSS projekte bus laikomasi to paties stiliaus vadovo (sąsaja taip pat gali būti sukonfigūruota automatiškai formatuoti failą kiekvieną kartą išsaugojant / įvesiant šaltinio kodą). Taigi, nesvarbu, ar dirbate komandoje, ar vienas, pamušalas visada yra puikus jūsų darbo eigos papildymas.

Išvada

Esu įsitikinęs, kad jau esate įsitikinę, kad šiuolaikinė CSS plėtra yra labai toli nuo praeities požiūrio į kačių bandą. ��

Tai pasakysiu, dar kartą prisipažinsiu, net jei man skambės kaip sugedęs įrašas: kai kurias šiame straipsnyje aptartas priemones nėra lengva nustatyti, ypač jei nesate draugiški su npm ekosistema. . Bet prieš jausdamas pasibjaurėjimą ir nusukdamas veidą, pasakyk man tai: ar CSS buvo lengva, kai buvai pirmą kartą mokymasis tai? Ar buvo lengva išmokti suvaldyti divį, įsisavinti plūdrių nuotaikų svyravimus ir panašiai? Panašiai čia aprašytos priemonės turi tam tikrą mokymosi kreivę, tačiau jos yra to vertos.

Sąžiningai, kai tik pradėsite patirti rezultatus, imsitės savęs, kad to nepadarysite anksčiau. Nepamirškime pabrėžti modulinės, lieknos ir gerai organizuotos CSS svarbos!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map