Kaasaegne CSS: kaugemale Bootstrapist ja raamistikest

Paljude arendajate jaoks algab teekond veebiarendusse CSS-i raamistikega nagu Bootstrap või Foundation. Need raamistikud pakuvad kiiret ja lihtsat viisi reageerivate ja visuaalselt atraktiivsete veebisaitide loomiseks. Kuid ainult raamistikest sõltumine võib viia paisutatud koodi, kohandamisvõimaluste puudumiseni ja põhjalike CSS-i kontseptsioonide piiratud mõistmiseni. See artikkel uurib, kuidas liikuda raamistikest kaugemale ja võtta omaks kaasaegsed CSS-i tehnikad, et ehitada paremini toimivaid, hooldatavaid ja kohandatud veebisaite.

CSS-i raamistike võlu ja piirangud

CSS-i raamistikud pakuvad mitmeid eeliseid:

• Kiire arendus: eelnevalt ehitatud komponendid ja utiliidid kiirendavad oluliselt arendusprotsessi.
• Reageeriv disain: raamistikud sisaldavad tavaliselt reageerivaid ruudustikke ja komponente, mis kohanduvad erinevate ekraanisuurustega.
• Ristbrauseri ühilduvus: raamistikud lahendavad sageli ristbrauseri ühilduvusprobleeme, tagades ühtlase kasutajakogemuse.
• Kogukonna tugi: suured kogukonnad pakuvad rohkelt ressursse, dokumentatsiooni ja tuge.

Kuid raamistikel on ka piiranguid:

• Paisutatud kood: raamistikud sisaldavad sageli stiile ja komponente, mida te ei vaja, mille tulemuseks on suuremad CSS-i failid ja aeglasem lehe laadimisaeg.
• Kohandamise puudumine: raamistiku stiilide tühistamine võib olla keeruline ja võib põhjustada spetsiifilisuse probleeme.
• Piiratud CSS-i mõistmine: ainult raamistikest sõltumine võib takistada teie arusaamist CSS-i põhikontseptsioonidest.
• Sõltuvus värskendustest: raamistiku värskendused võivad tuua kaasa murrangulisi muudatusi, mis nõuavad teie koodi ümberkorraldamist.
• Üldine välimus: samal raamistikul ehitatud veebisaidid võivad sageli sarnased välja näha, muutes ainulaadse brändi identiteedi loomise keeruliseks.

Kaasaegsete CSS-i tehnikate omaksvõtmine

Kaasaegne CSS pakub võimsaid funktsioone, mis võimaldavad teil ehitada keerulisi paigutusi, luua vapustavaid animatsioone ja kirjutada hooldatavamat koodi, ilma et peaksite suuresti raamistikest sõltuma.

1. CSS Grid Layout

CSS Grid Layout on kahemõõtmeline paigutussüsteem, mis võimaldab teil hõlpsalt luua keerulisi ruudustikupõhiseid paigutusi. See pakub võimsaid tööriistu elementide paigutuse ja suuruse kontrollimiseks ruudustiku konteineri sees.

Näide: lihtsa ruudustiku paigutuse loomine

            
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Kolm võrdset veergu */
  grid-gap: 20px; /* Tühik ruudustiku elementide vahel */
}

.item {
  background-color: #f0f0f0;
  padding: 20px;
}

            

              
                Copy
              
            
          

CSS Grid eelised:

• Kahemõõtmeline paigutus: looge hõlpsalt keerulisi paigutusi ridade ja veergudega.
• Paindlikkus: kontrollige elementide paigutust ja suurust täpselt.
• Reageerimisvõime: looge reageerivaid paigutusi, mis kohanduvad erinevate ekraanisuurustega.
• Semantiline HTML: kasutage semantilist HTML-i ilma esitlusklassidest sõltumata.

2. Flexbox Layout

Flexbox Layout on ühemõõtmeline paigutussüsteem, mis pakub paindlikku viisi ruumi jaotamiseks konteineri elementide vahel. See sobib ideaalselt navigeerimismenüüde loomiseks, elementide joondamiseks ja reageerivate komponentide ehitamiseks.

Näide: horisontaalse navigeerimismenüü loomine

            
.nav {
  display: flex;
  justify-content: space-between; /* Jaotage elemendid ühtlaselt */
  align-items: center; /* Joondage elemendid vertikaalselt */
}

.nav-item {
  margin: 0 10px;
}

            

              
                Copy
              
            
          

Flexboxi eelised:

• Ühemõõtmeline paigutus: korraldage elemendid tõhusalt ritta või veergu.
• Joondamine: joondage elemendid hõlpsalt horisontaalselt ja vertikaalselt.
• Ruumi jaotamine: kontrollige, kuidas ruumi elementide vahel jaotatakse.
• Reageerimisvõime: looge reageerivaid komponente, mis kohanduvad erinevate ekraanisuurustega.

3. CSS-i kohandatud omadused (muutujad)

CSS-i kohandatud omadused, tuntud ka kui CSS-i muutujad, võimaldavad teil määratleda korduvalt kasutatavaid väärtusi, mida saab kasutada kogu teie CSS-is. See muudab teie koodi hooldatavamaks, paindlikumaks ja hõlpsamini värskendatavaks.

Näide: primaarvärvi määratlemine ja kasutamine

            
:root {
  --primary-color: #007bff;
}

.button {
  background-color: var(--primary-color);
  color: white;
}

            

              
                Copy
              
            
          

CSS-i kohandatud omaduste eelised:

• Hooldatavus: värskendage väärtusi hõlpsalt ühes kohas, mitte mitmes kohas.
• Teemade loomine: looge erinevaid teemasid, muutes kohandatud omaduste väärtusi.
• Paindlikkus: värskendage kohandatud omadusi dünaamiliselt JavaScripti abil.
• Organisatsioon: parandage koodi korraldust ja loetavust.

4. CSS-i moodulid

CSS-i moodulid on viis kirjutada CSS-i, mis on piiratud konkreetse komponendiga. See hoiab ära nimekonfliktid ja muudab teie CSS-i modulaarsemaks ja hooldatavamaks. Kuigi see ei ole natiivne CSS-i funktsioon, kasutatakse neid tavaliselt ehitustööriistadega nagu Webpack või Parcel.

Näide: CSS-i moodulite kasutamine Reacti komponendiga

            
// Button.module.css
.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
}

// Button.js
import styles from './Button.module.css';

function Button(props) {
  return {props.children};
}

export default Button;

            

              
                Copy
              
            
          

CSS-i moodulite eelised:

• Ulatus: vältige nimekonflikte, piirates CSS-i konkreetse komponendiga.
• Modulaarsus: looge modulaarseid ja korduvalt kasutatavaid CSS-i komponente.
• Hooldatavus: parandage koodi korraldust ja hooldatavust.
• Lokaalsus: lihtsam on mõista CSS-i, mis kehtib konkreetse komponendi kohta.

5. CSS-i eelprotsessorid (Sass, Less)

CSS-i eelprotsessorid nagu Sass ja Less laiendavad CSS-i funktsionaalsust, lisades funktsioone nagu muutujad, pesastamine, miksiinid ja funktsioonid. Need funktsioonid võivad aidata teil kirjutada paremini korraldatud, hooldatavat ja korduvalt kasutatavat CSS-i.

Näide: Sassi muutujate ja pesastamise kasutamine

            
$primary-color: #007bff;

.button {
  background-color: $primary-color;
  color: white;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

            

              
                Copy
              
            
          

CSS-i eelprotsessorite eelised:

• Muutujad: määratlege korduvalt kasutatavad väärtused värvide, fontide ja muude omaduste jaoks.
• Pesastamine: pesastage CSS-i reeglid, et luua hierarhilisem struktuur.
• Miksiinid: määratlege korduvalt kasutatavad CSS-i koodiplokid.
• Funktsioonid: tehke CSS-i väärtustega arvutusi ja manipulatsioone.
• Hooldatavus: parandage koodi korraldust ja hooldatavust.

6. CSS-in-JS

CSS-in-JS on tehnika, mis hõlmab CSS-i kirjutamist otse JavaScripti komponentides. See lähenemisviis pakub mitmeid eeliseid, sealhulgas komponendipõhine stiilimine, dünaamiline stiilimine ja parem jõudlus.

Näide: styled-components kasutamine Reactiga

            
import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  color: white;
  padding: 10px 20px;

  &:hover {
    background-color: darken(#007bff, 10%);
  }
`;

function MyComponent() {
  return Click me;
}

            

              
                Copy
              
            
          

CSS-in-JS eelised:

• Komponendipõhine stiilimine: stiilige komponente otse JavaScriptis.
• Dünaamiline stiilimine: värskendage stiile dünaamiliselt komponendi oleku või rekvisiitide alusel.
• Parem jõudlus: genereerige optimeeritud CSS käitusajal.
• Nimekonfliktid puuduvad: vältige nimekonflikte unikaalsete klassinimedega.

7. Atomic CSS (Functional CSS)

Atomic CSS, tuntud ka kui Functional CSS, on lähenemisviis CSS-i kirjutamisele, mis hõlmab väikeste, ühekordse otstarbega CSS-i klasside loomist. Seejärel kombineeritakse neid klasse elementide stiilimiseks. See lähenemisviis võib viia hooldatavama ja korduvalt kasutatava CSS-ini, kuid see võib kaasa tuua ka mahuka HTML-i.

Näide: Atomic CSS klasside kasutamine

            

  Click me


            

              
                Copy
              
            
          

Atomic CSS eelised:

• Taaskasutatavus: kasutage CSS-i klasse mitme elemendi vahel korduvalt.
• Hooldatavus: värskendage stiile hõlpsalt, muutes ühte CSS-i klassi.
• Jõudlus: vähendage CSS-i faili suurust olemasolevate klasside taaskasutamisega.
• Järjepidevus: tagage kogu oma veebisaidil järjepidev stiilimine.

Disainisüsteemi ehitamine kaasaegse CSS-iga

Disainisüsteem on korduvkasutatavate komponentide ja juhiste kogu, mis tagab järjepidevuse ja tõhususe disaini- ja arendusprotsessis. Kaasaegsed CSS-i tehnikad võivad mängida olulist rolli tugeva ja skaleeritava disainisüsteemi ehitamisel.

Peamised kaalutlused disainisüsteemi ehitamisel:

• Komponentide teek: looge korduvkasutatavate UI komponentide teek hästi määratletud stiilide ja käitumistega.
• Stiilijuhend: dokumenteerige disainipõhimõtted, tüpograafia, värvipalett ja muud stiilijuhised.
• CSS-i arhitektuur: valige CSS-i arhitektuur, mis soodustab hooldatavust ja skaleeritavust, näiteks BEM, OOCSS või Atomic CSS.
• Teemade loomine: rakendage teemadesüsteem, mis võimaldab teil hõlpsalt erinevate teemade vahel vahetada.
• Juurdepääsetavus: tagage, et kõik komponendid oleksid puuetega kasutajatele juurdepääsetavad.

Näide: disainisüsteemi struktureerimine kohandatud omadustega

            
:root {
  /* Värvid */
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --accent-color: #ffc107;

  /* Tüpograafia */
  --font-family: sans-serif;
  --font-size-base: 16px;

  /* Vahed */
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
}

            

              
                Copy
              
            
          

CSS-i jõudluse optimeerimine

CSS-i jõudluse optimeerimine on ülioluline kiire ja sujuva kasutajakogemuse tagamiseks. Siin on mõned näpunäited CSS-i jõudluse parandamiseks:

• Minimeerige CSS: eemaldage CSS-i failidest tarbetud märgid ja tühikud, et vähendada nende suurust.
• Pakkige CSS kokku: kasutage CSS-i failide suuruse edasiseks vähendamiseks Gzip- või Brotli-pakkimist.
• Kombineerige CSS-i failid: vähendage HTTP päringute arvu, kombineerides mitu CSS-i faili ühte faili.
• Kasutage CDN-i: teenindage oma CSS-i faile sisuedastusvõrgust (CDN), et parandada laadimisaega kasutajatele kogu maailmas.
• Vältige @import: vältige @import reegli kasutamist, kuna see võib lehe renderdamist aeglustada.
• Optimeerige selektorid: kasutage tõhusaid CSS-i selektoreid, et vähendada aega, mis kulub brauseril stiilide rakendamiseks.
• Eemaldage kasutamata CSS: eemaldage kogu CSS-i kood, mida teie veebisaidil ei kasutata. Tööriistad nagu PurgeCSS ja UnCSS aitavad teil tuvastada ja eemaldada kasutamata CSS-i.

Juurdepääsetavuse kaalutlused

Juurdepääsetavus on veebiarenduse oluline aspekt. CSS-i kirjutamisel on oluline arvestada puuetega kasutajate vajadustega.

Peamised juurdepääsetavuse kaalutlused:

• Semantiline HTML: kasutage semantilisi HTML-i elemente, et pakkuda oma sisule struktuuri ja tähendust.
• Värvikontrast: tagage piisav värvikontrast teksti ja taustavärvide vahel.
• Klaviatuuriga navigeerimine: veenduge, et teie veebisaidil oleks võimalik täielikult klaviatuuriga navigeerida.
• Fookusindikaatorid: pakkuge interaktiivsete elementide jaoks selgeid fookusindikaatoreid.
• ARIA atribuudid: kasutage ARIA atribuute, et pakkuda abitehnoloogiatele täiendavat teavet.

Näide: piisava värvikontrasti tagamine

            
.button {
  background-color: #007bff;
  color: white;
}

            

              
                Copy
              
            
          

Selles näites veenduge, et valge teksti ja sinise tausta vaheline kontrastsussuhe vastaks juurdepääsetavuse standarditele (WCAG 2.1 AA nõuab normaalse teksti puhul kontrastsussuhet vähemalt 4,5:1 ja suure teksti puhul 3:1).

Liikumine raamistikest kaugemale: praktiline lähenemine

Raamistikest kaasaegse CSS-i juurde üleminek ei pea olema kõik või mitte midagi lähenemine. Saate järk-järgult lisada kaasaegseid CSS-i tehnikaid oma olemasolevatesse projektidesse.

Võetavad sammud:

1. Alustage väikeselt: alustage CSS Grid või Flexboxi kasutamisega väikeste paigutusülesannete jaoks.
2. Õppige põhitõdesid: investeerige aega CSS-i põhikontseptsioonide mõistmisse.
3. Katsetage: proovige erinevaid CSS-i tehnikaid ja vaadake, mis teie projektide jaoks kõige paremini sobib.
4. Tehke järk-järgult ümber: tehke olemasolev kood järk-järgult ümber, et kasutada kaasaegseid CSS-i tehnikaid.
5. Ehitage komponentide teek: looge korduvkasutatavate CSS-i komponentide teek.

Kokkuvõte

Kaasaegne CSS pakub võimsaid tööriistu toimivate, hooldatavate ja kohandatud veebisaitide ehitamiseks. Liikudes raamistikest kaugemale ja võttes omaks need tehnikad, saate oma koodi üle suurema kontrolli, parandada oma veebisaidi jõudlust ja luua ainulaadse brändi identiteedi. Kuigi raamistikud võivad olla kasulik lähtepunkt, on kaasaegse CSS-i valdamine hädavajalik, et saada vilunud esiotsa arendajaks. Võtke väljakutse vastu, uurige võimalusi ja avage CSS-i kogu potentsiaal.

See juhend on mõeldud lähtepunktiks teie teekonnal kaasaegsesse CSS-i. Ärge unustage uurida iga funktsiooni ametlikku dokumentatsiooni, katsetada erinevaid tehnikaid ja kohandada neid vastavalt oma konkreetsetele projektivajadustele. Head kodeerimist!