Karcsúsító Bootstrap

Bootstrap. Ez az egyik leggyakoribb és legismertebb kódkönyvtár az interneten - ami természetesen az egyik legvitatottabbá teszi. Azoknak az embereknek, akik szeretik a Bootstrap-ot, ez lehetővé teszi számukra, hogy nagyon gyorsan elkészítsék terméküket; azok számára, akik a kerítés túloldalán vannak, felfújt weboldalakhoz vezet, amelyek mind ugyanúgy néznek ki.

bootstrap

Mint sok mindenről, ami erősen vitatott, van néhány kompromisszum, amely szerintem mindkét fél lemaradhat.

Megjegyzés: ez a cikk azt feltételezi, hogy ismeri a SASS-t.

A Bootstrap közelebbi pillantása

Egy ideje használom a Bootstrap 4-et. Annak ellenére, hogy még mindig alfában van, jó sikereket értem el a használatában és tesztelésében - ezért erre a legfrissebb verzióra fogok összpontosítani (bár ugyanezek továbbra is érvényesek a Bootstrap 3-ra).

Ha megnézzük a Github forráskódját, meglátjuk az ismert dist mappát, amely lefordított CSS és JavaScript fájlokat tartalmaz - de ha egy kicsit mélyebben megnézzük az scss és a js mappákat, akkor kisebb kóddaraboknak tűnik.

Az scss mappánkban nézzünk meg a bootstrap.scss oldalon. Amit látunk, az az import mennyisége, amely ezeket a kisebb darabokat veszi fel. Egy másik scss megjegyzésfájl a _variables.scss fájl.

SASS és! Alapértelmezett

A _variables.scss fájlt megvizsgálva azt vesszük észre, hogy amikor egy változót deklarálunk, azt egy! Alapértelmezett zászló követi. Vessünk egy pillantást a zászló működésére.

Vizsgáljuk meg a következő kódot - és ez lehet a szokás, hogy a Bootstrap szokott lenni.

Az ilyesmi dolgok hátránya, hogy a teljesítményünk kétszer akkora lesz, mint amilyennek lennie kell:

Mi lenne, ha a kód összeállítása előtt újradefiniálnánk, mi volt a $ link-color? Szerencsére erre szolgál a! Alapértelmezett zászló.

Vizsgáljuk meg a fenti példa első sorát:

Amit ez a sor mond: rendelje hozzá ezt a színt a $ link-color fájlhoz kivéve, ha már meghatározták.

Tehát, ha egy változó meghatározásának technikáját alkalmazzuk előtt a Bootstrap fájlunkat, valóban módosíthatjuk azt a kódot, amelyet a Bootstrap maga ad ki.

Térjünk vissza a példánkra.

Ez eredményezi:

Tehát látunk néhány előnyt a változók deklarálásában, mielőtt a Bootstrap scss fájljainkat beépítenénk az építési folyamatunkba:

  1. Kevesebb kódot írunk. A kód felülírása helyett egyszerűen a változókat felülírjuk.
  2. Kevesebb kódot adunk ki - mindig kiváló teljesítmény.

Csak azt használjuk, amire szükségünk van

A Bootstrap scss fájljainak másik előnye, hogy kicsit részletesebbek lehetünk a projektünkben szereplő kóddal. Nem használ riasztásokat és módokat? Ne tegye bele azokat a darabokat. Vessünk egy pillantást az app.scss fájlomra (a fő scss fájlomra, amely egyszerűen importál más részleges scss fájlokat):

A fájl tetején található az egyéni változók fájlom, amely felülír minden használt Bootstrap változót (színek, betűméretek stb.). Azonnal követem azokat a konkrét Bootstrap fájlokat, amelyeket felveszek.

Stratégiám a dolgok csökkentésére - kezdjem a szükséges alapkomponensekkel és néhány alapvető fájllal (normalizálás, újraindítás és gépelés) - és miközben elkezdem hozzáadni a tartalmat, hozzáadom a kapcsolódó fájlokat (táblázatok, gombok).

Ugyanezeket a technikákat használhatom a Bootstrap JavaScript fájljaival is. Az általam használt építési folyamat kihasználja a webpack előnyeit, ami hihetetlenül megkönnyíti a JavaScript-darabok beillesztését.

Valójában azonban nem használom Bármi a Bootstrap JavaScript funkcióinak. Nem mintha bármelyik rossz lenne - a webhelyem ezen szakaszában nincs rá szükség.

Eredmények

Tehát, bár van egy kis munka ennek hátterében - valójában meglehetősen minimális és megéri az erőfeszítést.

Írja be a Bootstrap Me megtakarításokat
CSS 23,1 KB 5.5KB 76%
JS 13,7 KB 7,2 KB 47%

Ha szeretne egy kicsit többet megtudni arról, hogy mit csinálok, a webhely forráskódja elérhető a Githubon.

Újrafutóz

Szeretem a Bootstrap-ot. Ez lehetővé teszi számomra, hogy sokkal gyorsabban készítsek webhelyeket, mint az összes CSS-t kézzel írni. Lehet-e karcsúbb a CSS, ha ezt tenném? Talán. Amíg nem dolgozom egy olyan webhelyen, ahol a megtakarítások minden bájtja segít, addig elégedett vagyok az eredményekkel, amelyeket az itt vázolt technikák alkalmazásával kapok.

A teljesítmény és a teljesítményre fordított idő arányának egyensúlya projektenként eltérő. Örülnék, ha olyan projekteket szereznék be, amilyen gyorsan csak lehet, minden egyes projektnél, amin dolgozom - de a valóság az, hogy időbe telik; és nem minden ügyfélnek van annyi ideje (azaz költségvetése), amellyel együtt dolgozhat.

Tehát tedd, amit tudsz, azzal, amid van. Ha már dolgozik egy projekten, amelynek összeállítása folyamatban van, akkor néhány lépés megtétele a könyvtárak némelyikének szűkítése érdekében könnyű nyereményhez vezethet.

Mint ez? Van kérdés?
Érjen el Twitteren keresztül a @adamwillsdev oldalon