Lihtsustage oma paigutusi: CSS Grid'i kaudsete nimega joonte maagia

Tänapäevase veebiarenduse maailmas on CSS Grid Layout muutnud revolutsiooniliselt seda, kuidas me mõtleme ja ehitame kahemõõtmelisi paigutusi. See pakub kontrolli ja lihtsuse taset, mis kunagi oli keerukate häkkide ja habraste raamistike pärusmaa. Paljude võimsate funktsioonide seas paistavad nimega ruudustikujooned silma oma võimega muuta paigutused loetavamaks ja hooldatavamaks.

Paljud arendajad on tuttavad ruudustiku joonte otsese nimetamisega. Siiski on olemas vähem tuntud, peaaegu maagiline funktsioon, mis suudab teie töövoogu veelgi sujuvamaks muuta: kaudsed nimega jooned. See on automaatse joonenimede genereerimise kontseptsioon, mehhanism, kus CSS Grid loob teie jaoks tähendusrikkaid nimesid, tuginedes teie paigutuse struktuurile. Keerukate rakenduste kallal töötavatele globaalsetele meeskondadele ei ole see funktsioon lihtsalt mugavus; see on märkimisväärne tootlikkuse ja koodikvaliteedi tõus.

See põhjalik ülevaade uurib kaudsete nimega joonte võimsust, kuidas neid genereeritakse ja kuidas saate neid ära kasutada, et ehitada vastupidavamaid, intuitiivsemaid ja rahvusvaheliselt sõbralikumaid veebipaigutusi.

Kiire meeldetuletus: ruudustiku joonte mõistmine

Enne kui süveneme kaudsesse, vaatame lühidalt üle otsese. CSS Grid on põhimõtteliselt ristuvate horisontaalsete ja vertikaalsete joonte kogum. Vaikimisi on need jooned nummerdatud, alustades 1-st.

Saate paigutada elemente ruudustikule, kasutades neid joonenumbreid:

            .container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.item {
  grid-column-start: 2;
  grid-column-end: 3;
}
            

              
                Copy
              
            
          

Kuigi see on funktsionaalne, võib numbritele tuginemine olla habras. Kui lisatakse uus veerg, nihkuvad joonenumbrid, mis võib teie paigutuse rikkuda. Siin tulevad appi otsesed nimega jooned. Saate oma ruudustiku joontele määrata kohandatud nimesid, kasutades nurksulgusid `[]`:

            .container {
  display: grid;
  grid-template-columns: [page-start] 1fr [main-start] 2fr [main-end] 1fr [page-end];
}

.item {
  grid-column-start: main-start;
  grid-column-end: main-end;
  /* Lühend: grid-column: main-start / main-end; */
}
            

              
                Copy
              
            
          

See on tohutu edasiminek. Kood on nüüd isedokumenteeriv. `main-start` on palju kirjeldavam kui `2`. Teie paigutus on ka vastupidavam; seni kuni nimega jooned eksisteerivad, paigutatakse element õigesti, olenemata selle numbrilisest asukohast.

Väljakutse: korduvad ruudustikud ja nimetamise paljusõnalisus

Otsene nimetamine toimib suurepäraselt peamiste paigutusstruktuuride puhul. Aga mis saab väga korduvatest või keerukatest ruudustikest? Mõelge kaheteistkümneveerulisele ruudustikule, mis on levinud muster disainisüsteemides üle maailma.

            .container {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr [col-end]);
}
            

              
                Copy
              
            
          

See kood loob kaksteist joont nimega `col-start` ja kaksteist joont nimega `col-end`. Konkreetse sihtimiseks peate lisama numbri (nt `grid-column: col-start 3;`). See toob tagasi osa numbripõhise paigutuse haprusest. Mis oleks, kui oleks olemas viis saada tähenduslikke nimesid automaatselt, eriti teie lehe kõrgetasemelise struktuuri jaoks? See on täpselt see probleem, mille kaudsed nimega jooned lahendavad.

Maagia tuum: kaudsed jooned `grid-template-areas` abil

Peamine ja kõige võimsam viis, kuidas CSS Grid automaatselt joonenimesid genereerib, on omaduse `grid-template-areas` kaudu. See omadus võimaldab teil luua oma paigutuse visuaalse esituse, määrates nimed erinevatele ruudustiku piirkondadele.

Vaatame klassikalist lehepaigutust:

            .page-wrapper {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
            

              
                Copy
              
            
          

Siin oleme määratlenud neli nimega ala: `header`, `sidebar`, `main` ja `footer`. Kui brauser seda töötleb, ei loo see ainult alasid; see genereerib ka automaatselt nimega ruudustikujooned iga ala alguse ja lõpu jaoks. Iga nimega ala `foo` jaoks loob Grid neli kaudset joonenime:

• `foo-start` (algusveeru joone jaoks)
• `foo-end` (lõppveeru joone jaoks)
• `foo-start` (algusrea joone jaoks)
• `foo-end` (lõpprea joone jaoks)

Rakendades seda meie näitele, on CSS Grid loonud meile täiesti automaatselt järgmised jooned:

• Veerujooned: `header-start`, `sidebar-start`, `main-start`, `footer-start`, `header-end`, `main-end`, `footer-end`, `sidebar-end`. Pange tähele, et mõned neist viitavad samale füüsilisele ruudustikujoonele (nt `sidebar-end` ja `main-start` on sama joon).
• Reajooned: `header-start`, `sidebar-start`, `main-start`, `footer-start`, `header-end`, `sidebar-end`, `main-end`, `footer-end`.

Kuidas neid automaatseid jooni kasutada

Nüüd saate neid genereeritud nimesid kasutada elementide paigutamiseks, täpselt nagu teeksite otseselt nimetatud joontega. Kujutage ette, et soovite paigutada teavitusriba, mis peaks ulatuma ainult põhisisu alale.

            .notification-banner {
  grid-column: main-start / main-end;
  grid-row: header-end / header-end;
  /* Paigutage see otse päise alla, põhiveeru alasse */
}
            

              
                Copy
              
            
          

See on uskumatult võimas. Te paigutate elemendi semantilise ala (`main`) suhtes, ilma et peaksite teadma selle täpseid joonenumbreid või looma täiendavaid otseseid nimesid. Teie kood on puhas, loetav ja otseselt seotud teie kavandatud paigutusstruktuuriga.

Globaalsed kasutusjuhud: kaudsete joonte rakendamine praktikas

Selle lähenemisviisi eelised muutuvad veelgi ilmsemaks keerukate, responsiivsete rakenduste ehitamisel globaalsele publikule.

Näide 1: mitmekeelne e-kaubanduse tootekart

Mõelge tootekardi komponendile, mida kasutatakse mitmes rahvusvahelises e-poes. Paigutus peab olema järjepidev, kuid tootenimede, kirjelduste ja hindade teksti pikkus võib keelte nagu inglise, saksa ja jaapani vahel oluliselt erineda.

Saame kaardi sisemise struktuuri määratleda `grid-template-areas` abil:

            .product-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "image image"
    "title price"
    "desc desc"
    "button button";
}

.product-image { grid-area: image; }
.product-title { grid-area: title; }
.product-price { grid-area: price; }
.product-description { grid-area: desc; }
.add-to-cart-button { grid-area: button; }
            

              
                Copy
              
            
          

Kujutage nüüd ette, et peate lisama väikese "Uus!" märgi, mis joonduks täiuslikult tootenime algusega, ja "Allahindlus" ikooni, mis joonduks hinna lõpuga. Saate kasutada automaatselt genereeritud kaudseid jooni:

            .new-badge {
  grid-column-start: title-start;
  grid-row-start: title-start;
  /* Paigutage see pealkirja ala ülemisse vasakusse nurka */
}

.sale-icon {
  grid-column-end: price-end;
  grid-row-start: price-start;
  /* Paigutage see hinna ala ülemisse paremasse nurka */
}
            

              
                Copy
              
            
          

See paigutus on märkimisväärselt vastupidav. Kui turundusotsus Euroopa turul nõuab `title` ja `price` asukohtade vahetamist, peate muutma ainult `grid-template-areas`. Märgid järgnevad automaatselt, sest nende paigutus on semantiliselt seotud aladega, mitte fikseeritud ruudustikujoontega. See vähendab rahvusvaheliste meeskondade hoolduskoormust.

Näide 2: responsiivne globaalne uudisteportaal

Uudiste veebisaitidel on sageli keerukad paigutused, mis peavad kohanema erinevate ekraanisuurustega, alates mobiiltelefonidest kuni suurte lauaarvuti monitorideni. `grid-template-areas` koos kaudsete joontega on selleks ideaalne tööriist.

Töölaua paigutus:

            .news-page {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-areas:
    "header header header"
    "left-rail main-story right-rail"
    "footer footer footer";
}

            

              
                Copy
              
            
          

Mobiili paigutus (meediapäringu sees):

            @media (max-width: 768px) {
  .news-page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main-story"
      "left-rail"
      "right-rail"
      "footer";
  }
}
            

              
                Copy
              
            
          

Reklaamelement, võib-olla globaalse kampaania jaoks, tuleb paigutada otse peamise loo kohale. Kasutades kaudseid jooni, on selle paigutus lihtne ja elegantne:

            .advertisement {
  grid-column: main-story-start / main-story-end;
  grid-row: main-story-start;
}

            

              
                Copy
              
            
          

See üksainus CSS-reegel töötab ideaalselt nii töölaua kui ka mobiili paigutuste jaoks. Töölaual ulatub reklaam üle keskmise veeru. Mobiilis ulatub see korrektselt üle kogu ekraani laiuse, täpselt nagu `main-story` ala. Reklaami paigutuse jaoks pole vaja täiendavaid meediapäringu ülekirjutusi. See on puhta, hooldatava ja responsiivse CSS-i kirjutamise kehastus.

Kaudsete nimega joonte üldised eelised

Selle tehnika kasutuselevõtt pakub mitmeid olulisi eeliseid, eriti suuremahuliste, koostööpõhiste projektide puhul.

• Ületamatu loetavus: Teie CSS muutub teie paigutuse kavatsuste kõrgetasemeliseks kaardiks. `grid-column: sidebar-start / main-end;` ütleb teisele arendajale kohe selle elemendi eesmärgi, olenemata nende emakeelest või projekti tundmisest.
• Äärmine vastupidavus: Paigutused muutuvad muutustele vastupidavaks. Saate lisada, eemaldada või ümber järjestada veerge ja ridu ruudustiku definitsioonis, ilma et peaksite värskendama iga üksiku elemendi paigutusreegleid. Seni kuni `grid-template-areas` on uuendatud, kohanduvad kaudsed jooned.
• Lihtsustatud responsiivne disain: Nagu uudisteportaali näites näha, saate meediapäringutes luua radikaalselt erinevaid paigutusi, määratledes lihtsalt uuesti `grid-template-areas`. Kaudsete joonenimedega paigutatud elemendid kohanduvad arukalt.
• Täiustatud arendajakogemus (DX): Semantiliste nimedega töötamine on intuitiivsem ja vähem vigadele aldis kui joonte lugemine. See kiirendab arendust ja vähendab vigu. Kaasaegsed brauseri arendajatööriistad pakuvad suurepäraseid visualiseerijaid ruudustikualade jaoks, muutes silumise imelihtsaks.
• Parem globaalne koostöö: Kui eri riikidest ja ajavöönditest pärit arendajad töötavad ühise koodibaasi kallal, on ühine arusaam kriitilise tähtsusega. Semantilised nimed loovad paigutusstruktuuri jaoks ühise sõnavara, mis ületab kultuuri- ja keelebarjäärid.

Võimalikud lõksud ja parimad praktikad

Kuigi see on võimas funktsioon, on mõned asjad, mida selle tõhusaks kasutamiseks meeles pidada.

1. Vältige nimekonflikte: Olge teadlik, et kaudsed joonenimed võivad minna vastuollu otsestega. Kui teil on ala nimega `main`, peaksite vältima otseselt joone loomist nimega `main-start`. Spetsifikatsioonis on selle kohta reeglid, kuid segaduse vältimiseks on parem säilitada selge nimetamiskonventsioon.
2. Hoidke `grid-template-areas` loetavana: Kuigi on ahvatlev luua väga detailset ASCII-kunsti, võivad liiga keerulised `grid-template-areas` definitsioonid muutuda raskesti loetavaks. Hoidke oma alad loogilisel, komponendi tasemel.
3. Universaalne brauseritugi: See on CSS Grid Level 1 spetsifikatsiooni põhifunktsioon. See on täielikult toetatud kõigis kaasaegsetes igihaljastes brauserites (Chrome, Firefox, Safari, Edge), mis teeb sellest turvalise ja usaldusväärse valiku globaalsele publikule suunatud tootmisveebisaitide jaoks.
4. Kasutage arendajatööriistu: Kahtluse korral kasutage oma brauseri inspektorit. See kuvab visuaalselt ruudustiku ülekatte, sealhulgas alad ja kõik nimega jooned (nii otsesed kui ka kaudsed), pakkudes kohest selgust teie paigutuse struktuuri kohta.

Kokkuvõte: võtke omaks automatiseerimine

CSS Grid'i kaudsed nimega jooned on tunnistus spetsifikatsiooni läbimõeldud disainist. Nad viivad meid eemale jäigast, numbripõhisest mõtlemisest ja lähemale semantilisemale, vastupidavamale ja kirjeldavamale viisile paigutuste ehitamisel.

Määratledes oma lehe struktuuri `grid-template-areas` abil, saate tasuta võimsa komplekti automaatselt genereeritud, tähenduslikke joonenimesid. See lihtsustab elementide paigutust, kiirendab teie responsiivset töövoogu ja muudab teie koodi teile ja teie rahvusvahelistele meeskonnaliikmetele oluliselt hooldatavamaks.

Järgmine kord, kui alustate uut CSS Grid paigutust, ärge mõelge ainult veergudele ja ridadele. Mõelge semantilistele aladele. Määratlege need `grid-template-areas` abil ja laske kaudsete nimega joonte maagial oma tööd lihtsustada ja disaini tulevikukindlaks muuta.