Mbinu Zangu Bora – CSS

1. Utangulizi

Siku hizi CSS haitumiki ipasavyo. Kuna pengo kati ya wasanidi wa Angular/React/Vue/... na wabunifu wa UI.

Mbunifu wa UI hupachika <div> thelathini, moja ndani ya nyingine, zikiwa na madarasa arobaini ya CSS, huku msanidi wa Angular akichangamkia maktaba mpya zaidi kila baada ya wiki 2, ilhali “jehanamu ya utegemezi” (dependency hell) yake imeshindwa kujengwa bila npm i --force tangu zamani, kwa sababu peer dependencies zinagongana. CSS na HTML hazimvutii sana mshabiki sugu wa TypeScript. Hata kwa sehemu rahisi kabisa za kuingiza data lazima atumie Material, kwa sababu anaogopa kwamba vinginevyo hataweza kushughulikia uthibitishaji. Na kwa hakika hataki kupoteza muda kwa kugundua gurudumu upya. Kwamba muda wote huo utapotea tena katika hitaji la kwanza ambalo maktaba hiyo haishughulikii – na kwamba atajikuta akisoma GitHub issues za maktaba hiyo – hilo halimjii akilini.

Ukiwa msanidi katika mradi wa fullstack, ni nadra kupata nafasi ya kuonyesha ujuzi wako kama mbunifu wa frontend. Unapokea michoro ya skrini kwenye Figma na lazima uitekeleze kama ilivyo hasa. Wasanidi wengi wa frontend wa aina hii hawajui hata kidogo kwamba mpangilio unaojirekebisha (responsive) unaweza kupatikana kwa mstari mmoja tu wa CSS. CSS ina nguvu kuliko wakati mwingine wowote. Zimepita zama za hila za mitindo kwa JS, media queries lukuki na suluhisho za muda kwa ajili ya IE 8. Heko!

2. Katikati kabisa

Haikupokelewa vizuri kila mara kwenye mahojiano ya kazi, lakini mimi niliifurahia: swali la kama mimi ni hodari wa frontend nilipenda kulijibu kwa “Ndiyo kabisa. Ninaweza kuweka <div> katikati kiwima.”

Kuweka div katikati kunajulikana kuwa kugumu sana.

Si tena:

.parent {
    display: grid;
    place-items: center
}

3. Grid inayojirekebisha

.parent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

4. Flex inayojirekebisha

.parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.box {
    flex: 1 1 150px; /*  Stretching: */
    flex: 0 1 150px; /*  No stretching: */
    margin: 5px;
}

5. Mpangilio wa ukurasa

.parent {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

6. Upau wa pembeni

.parent {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

7. Shukrani

1-Line Layouts