M

MLOG

Eesti

Avastage kaasaegseid CSS-i tehnikaid, mis ulatuvad kaugemale raamistikest nagu Bootstrap. Õppige CSS Grid, Flexboxi, kohandatud omaduste ja muu kohta, et ehitada toimivaid ja hooldatavaid veebisaite.

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:

Kuid raamistikel on ka piiranguid:

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;
}

CSS Grid eelised:

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;
}

Flexboxi eelised:

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;
}

CSS-i kohandatud omaduste eelised:

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 ;
}

export default Button;

CSS-i moodulite eelised:

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%);
  }
}

CSS-i eelprotsessorite eelised:

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 ;
}

CSS-in-JS eelised:

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

Atomic CSS eelised:

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:

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;
}

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:

Juurdepääsetavuse kaalutlused

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

Peamised juurdepääsetavuse kaalutlused:

Näide: piisava värvikontrasti tagamine


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

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!