A CSS legfontosabb eszközei a webes fejlesztők és a tervezők számára

A CSS hosszú utat tett meg, de a szerszámgépe eddig nem volt.


Ha úgy érzi, hogy a CSS írása olyan, mint a szörnyek elleni küzdelem egy kátrányban, akkor nem vagy egyedül. Bár a CSS az egyik legfontosabb technológia, amely táplálja az internetet, önmagában nem megfelelő programozási nyelv vagy keret. Ennek eredményeként, amint a projekt elindul, és a rendetlenség növekszik, úgy tűnik a rendetlenség – úgy tűnik, hogy a kiválasztó szabályok mindenütt vannak, és nehéz megtalálni, hogy hol van; amint betűkészleteket, külső CSS-eket, JS-ket és egyéb eszközöket tartalmaz az oldalain, úgy tűnik, hogy a csomag végső mérete kéznél van, és kíváncsi vagy arra, hol vesztek el a gyors, felhasználóbarát kezelőfelületek eszményei.

De nem ilyennek kell lennie. Ma a CSS körüli szerszámkészlet olyan szintre fejlődött, hogy a munkafolyamatot nem csak megszelídíteni, hanem élvezetesvé is lehet tenni. Ebben a cikkben öt olyan CSS-eszközről fogok beszélni, amelyeket óriási értéket találtam munkám során. Tudatosan elkerültem a „játékszerű” eszközök, például a CSS-generátorok, a menügenerátorok stb. Használatát, mert több problémát okoznak, mint megoldják.

A CSS vonat jön! Gyerünk! �� ��

PostCSS

Ha szereti a JavaScriptet, szeretné azt az ötletet, amelyet a CSS-hez a JavaScripten keresztül hozzáadhatunk és vezérelhetünk. És pontosan ez a képesség PostCSS előírja.

Ugyanakkor ez nem csupán a JavaScript-alapú szintaxiscukor, mint a CSS. A PostCSS több hatékony csomagot / szolgáltatást csomagol össze, ami sokkal kellemesebb és könnyebb munkafolyamatot eredményez a CSS kezelésekor. Például:

  • A szállítói előtagok automatikusan hozzáadódnak a használt tulajdonság alapján.
  • Annak észlelése, hogy mely CSS-funkciókat lehet használni az aktuális böngészőben.
  • A közelgő, még kiadásra váró, de nagyon hatékony szintaxisfrissítések a CSS használatával.
  • Olyan érzékeny rács, amely rugalmas, amennyire csak kap.

Azt hiszem, nem fogok igazságot tenni a PostCSS-rel szemben, ha nem veszek bele a hálózati példát. Tehát itt megyünk. Valami olyan egyszerű, mint ez:

div {
elveszett oszlop: 1/3
}

átalakul egy teljes értékű CSS-rendszerré, szinte az összes szélsőséges eset figyelembe vételével:

div {
szélesség: számított (99,9% * 1/3 –
(30 képpont – 30 képpont * 1/3));
}
div: n. gyermek (1n) {
balra lebeg;
jobb margó: 30 képpont;
tiszta: nincs;
}
div: utolsó gyermek {
jobb margó: 0;
}
div: n. gyermek (3n) {
jobb margó: 0;
úszó: jobb;
}
div: n. gyermek (3n + 1) {
egyértelmű: mindkettő;
}

Mivel ez egy JS-vezérelt dolog, a PostCSS beállítása nem pontosan könnyű, főleg ha tervező vagy, és nem sok köze volt a modulokhoz, kötegelőkhöz és általában az npm világához. Ennek ellenére a PostCSS potenciálja munkájában hatalmas, ezért nem szabad figyelmen kívül hagyni.

PurgeCSS

Szereted a modern előlap keretrendszeren alapuló munkafolyamatot, de csalódottak vagyok amiatt, hogy túl sok poggyászot hoznak körül? Ha igen, a PurgeCSS a barátja, legalábbis a CSS szempontjából.

Azok számára, akik talán nem tudják, mi a nagy ügy: itt van egy gyors lerontás. Amikor egyoldalas alkalmazásokat készít olyan front-end keretrendszerekkel, mint a React, Angular, Vue stb., Akkor átmegy az úgynevezett „összeállítási folyamat”. Lényegében az összes CSS-t, JS-t, SASS-t, stb. Külön fájlokba kódolja (azokat úgy rendezi, ahogy Ön a leg intuitívabbnak találja), de ha kész, elmondja a csomagolónak, hogy “készítse” a dolgot. Mindez elolvassa az összes írt forráskódot, alkalmaz különféle szűrőket (tömörítés, obfuzifikáció / uglifikáció stb.), És szétvágja a kimenetet egyetlen fájlba, általában az „app.js” -ra az összes JavaScript számára, és „App.css” az összes CSS-hez. Ezek a fájlok, valamint a sovány „index.html”, minden, amire szükség van az alkalmazás első felületének futtatásához. A hátránya, hogy mivel mindent belefoglalnak ezekbe a végleges fájlokba, azok mérete gyakran meghaladja a gyors válaszidőhöz megengedett értéket; például nem ritka, ha 500 KB feletti „app.js” -t látunk!

A PurgeCSS hozzáadódik az összeépítési munkafolyamat részeként, és megakadályozza, hogy a nem használt CSS-t kössék a végső outputba. Egy tipikus felhasználási eset a Bootstrap: ez egy közepes méretű könyvtár, amely több felhasználói felület osztályt tartalmaz a különféle komponensek számára. Ha az alkalmazás például a Bootstrap osztályainak 10% -át használja, akkor a többi 90% az egyetlen verés a végső CSS-fájlban. De a PurgeCSS-nek köszönhetően az ilyen nem használt CSS-fájlok azonosíthatók és megakadályozhatók az összeállítási folyamatból, ami sokkal kisebb végső CSS-fájlokat eredményez (az 5-6-szoros méretcsökkentés elég normális).

Tehát folytassa, “tisztítsa meg” a felesleges CSS-t a PurgeCSS! ��

Hátszél

Hátszél egy CSS keretrendszer, de annyira ellentmond a szemcséknek, hogy azt hittem, hogy ebbe belefoglalom a CSS eszközök közé. Ha utálsz az inline CSS-t (ki nem ?!), akkor a Tailwind valószínűleg rémületbe ütközik vissza, amikor először találkozik rá. Nézzük meg az első ízét, ha megnézzük, hogyan kódolhat egy tipikus űrlapot a Tailwind CSS használatával:

Felhasználónév

Jelszó

Válasszon egy jelszót.

Bejelentkezés


Elfelejtett jelszó?

© 2019 Acme Corp. Minden jog fenntartva.

– Ez egy vicc, vagy mi? Mi az a bosszantó kis osztály? Közelebbi megfigyelés után miért állíthatom a margót, a párnázatot és a színt közvetlenül a HTML-sel együtt? Ez 2019 vagy mi?

Ilyen gondolatok várhatók. Tudom, mert ugyanúgy éreztem magam, és azonnal becsuktam a Tailwind fedelét. Csak később találkoztam egy olyan podcastlal, ahol a vendég egy divatos, tisztességes méretű weboldalt készített a Tailwindben, és kezdtem figyelni.

Mielőtt továbbmennénk, mérlegeljük ezeket a kérdéseket:

  • Unod már a normál keretosztályok és azok funkcióinak memorizálását, hogy testreszabhassa a terveit a saját ízlése szerint? Jó példa a Bootstrap navigációs sáv megjelenésének és viselkedésének megváltoztatása.
  • Gondolod, hogy az olyan népszerű keretek, mint a Bootstrap, túlterheltek, és sokkal többet próbálnak tenni, mint amennyire kellene?
  • Úgy találja magát, hogy keveredik a keretekkel, mert az összes világ legjobbját szeretné?
  • Szeretne jobban ellenőrizni a terveit, és mégis meglepőnek találja a vanília CSS-élményt?

Ha ezekre a válaszokra igen, akkor nagyon rosszul kell a Tailwind. Most nézzük meg, mi a Tailwind és mit csinál.

A hátsó szél az úgynevezett segédprogram első CSS, amely különbözik attól, amit a mindennapi munkafolyamatokban teszünk: szemantikus CSS. A szemantikus CSS és a hasznos CSS között az a különbség, hogy az előbbi megpróbálja a stíluselemeket csoportosítani az oldalon megjelenő vizuális szakaszok neve alapján. Tehát, ha van navigációs menü, kártyái, körhinta stb., Egy oldalon, a szemantikai módszer a CSS stílusszabályainak csoportosítása, például .nav, .card, .carousel stb. az alszekciók ennek megfelelően fel vannak tüntetve (például .card-test, .card-footer stb.). Ez messze a leggyakoribb megközelítés a CSS-hez, és mindannyian megismerjük ezt a keretet, például a Bootstrap, az Alapítvány, a Bulma, az UI Kit, stb..

Másrészt, a CSS elnevezésének „hasznossági” stílusa pontosan a funkció függvényében szól: egy osztályt, amely a felső és az alsó rész margóját vezérli, .margin-y-közegnek nevezzük, és bárhol felhasználható a HTML-ben jelölés, ahol erre a margóra szükség van. Noha ez kissé bevezet egy osztálynév kúszást (csak vessünk egy pillantást a korábban megosztott kódra vagy a képernyőképre – annyi osztály!), A CSS szándéka kristálytiszta: nem kell ugrani oda-vissza a dokumentáció, a CSS és a HTML között, hogy kitaláljuk a megfelelő neveket és a megfelelő hatást.

Ez egy nagyon felszabadító működési mód, de van egy remegés is: CSS-alapjainak szilárdan a helyén kell lennie (ideértve a modern koncepciókat, mint például a Flexbox). Ennek oka az, hogy a Tailwind az oldal egyetlen alkotóelemére sem kínál beépített stílusokat, és rajtad múlik, hogy a stílusokat az adott építőelemekből állítsák össze. Egy másik probléma a beállítással kapcsolatos: A Tailwind lehetővé teszi, hogy több CSS osztályt csoportosítson az úgynevezett komponensekbe, de a JavaScript segítségével történik, és modul betöltőre és kötegre van szükség, mint például a Webpack..

Mindent elmondva, a Tailwind egy polarizáló, feltűnő új módszer a stílus készítéséhez, és vonzó lesz azok számára, akik a nagyobb egyszerűség és irányítás iránt vágynak..

Saas

Habár Sass hosszú ideje létezik, beillesztettem ide, mert a fejlesztők még mindig nem tudják, mennyire hasznos. Stílusosan félelmetes stíluslapok (vagy SASS) a CSS szuperhalmaza, amelyet úgy fejlesztettek ki, hogy megbirkózzon a rázkódásokkal a projektben, ha a CSS néhány soron túlra növekszik..

Kép ez: hosszú utat írt a projekt CSS-jének írásakor. Néhány színt használ, kitalált néhány ésszerű margót a különféle részekre, betűtípusokra és így tovább. Kivéve, hogy most rájössz, hogy ez nem minden olyan jól lóg össze. Lehet, hogy szeretne kipróbálni a nagyobb margókat minden szakaszra, kártyára és gombra. Nos, most mi van? Még az a gondolat is, hogy az óriási CSS fájlon keresztül kell keresni-cserélni, elegendő ahhoz, hogy egy fejfájást okozzon. Mindannyian megtettük ezt, és tudjuk, hogy mennyire hajlamosak a hibákra. Sass megoldja ezt a problémát változók bevezetésével:

A HTML írásakor az elemeket beágyazzuk más elemekbe. A CSS írásakor azonban sík szabályrendszert kell felírnunk, ami megnehezíti a CSS mentális „illesztését” a HTML-be. A Sass segítségével utánozhatja az oldalszerkezetet a stílusfájlokban:

Mindez még csak nem kezd megkarcolni a Sass által kínált finomságok felületét: moduláris kialakítás, fájlok, keverékek, öröklés. . . a lista folytatódik. Persze, meg kell tanulnia egy Sass-fordító munkafolyamatát, és be kell építenie a sajátjába, ám véleményem szerint ez az eltöltött néhány óra olyan befektetés, amely újra és újra megtéríti Önt.!

CSS Linters

Mivel a webes tervezők (és a felhasználói felület fejlesztői – bár kíváncsi vagyok, hogy ez a két kifejezés különbözik ��) egyszerű szövegszerkesztőket használnak – vagy mint manapság ez történik, a Chrome dev eszközökből való kódolással -, ritkán hallanak egy szőtt. Másrészt, azok a programozók, akik olyan jó szövegszerkesztőket használnak, mint a VS Code, a Sublime Text vagy más IDE-k, nagyon jól ismerik ezt az eszközt, mivel számukra ez a második természet. Mindenesetre, a lényeg az, hogy ha Ön egyike azoknak a CSS-fejlesztőknek, akik belemerülnek a rendetlen CSS-be, akkor előnyös lehet egy későbbi.

Egyszerűen fogalmazva: a vonalkód olyan program, amely ellenőrzi a kódot hibák és következetlenségek szempontjából. Ezt egy olyan szabályrendszer segítségével teszi meg, amely meghatározza, hogy mi a baj és mi nem következetes. A jó linkerek integrálódnak az IDE-kkel és a kódszerkesztőkkel, és konfigurálhatók úgy, hogy minden alkalommal futtassák a forrásfájl mentését. Segítenek a színes előnézetekben, a hibákban és az automatikus kitöltésben is, a CSS-fájlok összeállításakor:

De itt van a legjobb rész – ha egy adott CSS stílusát és formázását követi, akkor az elégedettségére csípheti a bélést. Ez biztosítja, hogy a projekten belüli CSS ugyanazt a stílus útmutatást kövesse (az átalakító konfigurálható úgy is, hogy minden formátumot a forráskód mentésekor / átadásakor automatikusan formázjon). Tehát, függetlenül attól, hogy csapatban vagy egyedül dolgozik, a bélés mindig nagyszerű kiegészítés a projekt munkafolyamatához.

Következtetés

Biztos vagyok abban, hogy mostanra meg van győződve arról, hogy a modern CSS fejlesztés messze van a múltbeli tenyésztési megközelítéstől. ��

Ez azt jelenti: ismét beismerek valamit, még akkor is, ha hibásnak hangzik: néhány olyan eszköz, amelyet a cikkben tárgyaltam, nem könnyű beállítani, főleg ha nem barátságos kapcsolatban állsz az npm ökoszisztémával . De mielőtt undorodná, és elfordítaná az arcát, mondja el nekem: könnyű volt a CSS, amikor először voltál tanulás azt? Könnyű volt megtanulni központosítani a divot, elsajátítani az úszók hangulati ingadozásait és így tovább? Hasonlóképpen, az itt leírt eszközöknek van némi tanulási görbéjük, ám ezek megéri.

Őszintén szólva, miután elkezdte megtapasztalni az eredményeket, rúgja magát, hogy ezt nem hamarosan megteszi. És nem szabad alábecsülnünk a moduláris, karcsú és jól szervezett CSS fontosságát!

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