M

MLOG

Latviešu

Izpētiet modernas CSS tehnikas, kas pārsniedz tādus ietvarus kā Bootstrap. Uzziniet par CSS Grid, Flexbox, pielāgotajām īpašībām un citām iespējām, lai izveidotu veiktspējīgas un uzturējamas vietnes.

Modernais CSS: Ārpus Bootstrap un ietvariem

Daudziem izstrādātājiem ceļojums tīmekļa izstrādē sākas ar CSS ietvariem, piemēram, Bootstrap vai Foundation. Šie ietvari nodrošina ātru un vienkāršu veidu, kā izveidot adaptīvas un vizuāli pievilcīgas vietnes. Tomēr, paļaujoties tikai uz ietvariem, var rasties uzpūsts kods, pielāgošanas trūkums un ierobežota izpratne par galvenajiem CSS konceptiem. Šajā rakstā ir aplūkots, kā pārsniegt ietvarus un izmantot modernas CSS tehnikas, lai izveidotu veiktspējīgākas, uzturējamākas un pielāgotas vietnes.

CSS ietvaru valdzinājums un ierobežojumi

CSS ietvari piedāvā vairākas priekšrocības:

Tomēr ietvariem ir arī ierobežojumi:

Modernu CSS tehniku izmantošana

Modernais CSS piedāvā jaudīgas funkcijas, kas ļauj izveidot sarežģītus izkārtojumus, izveidot satriecošas animācijas un rakstīt vieglāk uzturējamu kodu, nepaļaujoties uz ietvariem.

1. CSS Grid Layout

CSS Grid Layout ir divdimensiju izkārtojuma sistēma, kas ļauj viegli izveidot sarežģītus uz režģi balstītus izkārtojumus. Tā nodrošina jaudīgus rīkus, lai kontrolētu elementu izvietojumu un izmēru režģa konteinerā.

Piemērs: Vienkārša režģa izkārtojuma izveide


.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Trīs vienādas kolonnas */
  grid-gap: 20px; /* Atstarpe starp režģa elementiem */
}

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

CSS Grid priekšrocības:

2. Flexbox Layout

Flexbox Layout ir vienas dimensijas izkārtojuma sistēma, kas nodrošina elastīgu veidu, kā sadalīt vietu starp elementiem konteinerā. Tas ir ideāli piemērots navigācijas izvēlnes izveidei, elementu līdzināšanai un adaptīvu komponentu veidošanai.

Piemērs: Horizontālas navigācijas izvēlnes izveide


.nav {
  display: flex;
  justify-content: space-between; /* Vienmērīgi sadaliet elementus */
  align-items: center; /* Vertikāli līdzināt elementus */
}

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

Flexbox priekšrocības:

3. CSS Custom Properties (Variables)

CSS Custom Properties, kas pazīstamas arī kā CSS mainīgie, ļauj definēt atkārtoti lietojamas vērtības, kuras var izmantot visā jūsu CSS. Tas padara jūsu kodu vieglāk uzturējamu, elastīgāku un vieglāk atjaunināmu.

Piemērs: Primārās krāsas definēšana un izmantošana


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

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

CSS Custom Properties priekšrocības:

4. CSS Modules

CSS Modules ir veids, kā rakstīt CSS, kas ir piesaistīts noteiktam komponentam. Tas novērš nosaukumu sadursmes un padara jūsu CSS modulārāku un vieglāk uzturējamu. Lai gan tā nav vietēja CSS funkcija, to parasti izmanto ar būvēšanas rīkiem, piemēram, Webpack vai Parcel.

Piemērs: CSS Modules izmantošana ar React komponentu


// 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 Modules priekšrocības:

5. CSS Preprocessors (Sass, Less)

CSS preprocesori, piemēram, Sass un Less, paplašina CSS funkcionalitāti, pievienojot tādas funkcijas kā mainīgie, ligzdošana, miksini un funkcijas. Šīs funkcijas var palīdzēt jums rakstīt organizētāku, uzturējamāku un atkārtoti lietojamu CSS.

Piemērs: Sass mainīgo un ligzdošanas izmantošana


$primary-color: #007bff;

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

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

CSS Preprocessors priekšrocības:

6. CSS-in-JS

CSS-in-JS ir tehnika, kas ietver CSS rakstīšanu tieši JavaScript komponentos. Šī pieeja piedāvā vairākas priekšrocības, tostarp komponentu līmeņa stilizāciju, dinamisku stilizāciju un uzlabotu veiktspēju.

Piemērs: Styled-components izmantošana ar React


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 priekšrocības:

7. Atomic CSS (Functional CSS)

Atomic CSS, kas pazīstams arī kā Functional CSS, ir pieeja CSS rakstīšanai, kas ietver mazu, vienam mērķim paredzētu CSS klašu izveidi. Pēc tam šīs klases tiek apvienotas, lai stilizētu elementus. Šī pieeja var padarīt CSS vieglāk uzturējamu un atkārtoti lietojamu, bet tā var izraisīt arī daudz vārdu HTML.

Piemērs: Atomic CSS klašu izmantošana

Atomic CSS priekšrocības:

Dizaina sistēmas izveide ar moderno CSS

Dizaina sistēma ir atkārtoti lietojamu komponentu un vadlīniju kolekcija, kas nodrošina konsekvenci un efektivitāti dizaina un izstrādes procesā. Modernās CSS tehnikas var spēlēt būtisku lomu spēcīgas un mērogojamas dizaina sistēmas izveidē.

Galvenie apsvērumi dizaina sistēmas izveidei:

Piemērs: Dizaina sistēmas strukturēšana ar pielāgotām īpašībām


:root {
  /* Krāsas */
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --accent-color: #ffc107;

  /* Tipogrāfija */
  --font-family: sans-serif;
  --font-size-base: 16px;

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

CSS veiktspējas optimizācija

CSS veiktspējas optimizācija ir ļoti svarīga, lai nodrošinātu ātru un vienmērīgu lietotāja pieredzi. Šeit ir daži padomi, kā uzlabot CSS veiktspēju:

Pieejamības apsvērumi

Pieejamība ir būtisks tīmekļa izstrādes aspekts. Rakstot CSS, ir svarīgi ņemt vērā lietotāju ar invaliditāti vajadzības.

Galvenie pieejamības apsvērumi:

Piemērs: Pietiekama krāsu kontrasta nodrošināšana


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

Šajā piemērā pārliecinieties, vai kontrasta attiecība starp balto tekstu un zilo fonu atbilst pieejamības standartiem (WCAG 2.1 AA pieprasa vismaz 4,5:1 kontrasta attiecību parastam tekstam un 3:1 lielam tekstam).

Pāreja ārpus ietvariem: Praktiska pieeja

Pāreja no ietvariem uz moderno CSS nav jābūt "viss vai nekas" pieejai. Jūs varat pakāpeniski iekļaut modernas CSS tehnikas savos esošajos projektos.

Veicamie pasākumi:

  1. Sāciet ar mazumiņu: Sāciet, izmantojot CSS Grid vai Flexbox maziem izkārtojuma uzdevumiem.
  2. Apgūstiet pamatus: Ieguldiet laiku, lai saprastu galvenos CSS konceptus.
  3. Eksperimentējiet: Izmēģiniet dažādas CSS tehnikas un noskaidrojiet, kas vislabāk darbojas jūsu projektiem.
  4. Pakāpeniski refaktorējiet: Pakāpeniski refaktorējiet savu esošo koda bāzi, lai izmantotu modernas CSS tehnikas.
  5. Izveidojiet komponentu bibliotēku: Izveidojiet atkārtoti lietojamu CSS komponentu bibliotēku.

Secinājums

Modernais CSS piedāvā jaudīgu rīku kopumu, lai izveidotu veiktspējīgas, uzturējamas un pielāgotas vietnes. Pārejot ārpus ietvariem un izmantojot šīs tehnikas, jūs varat iegūt lielāku kontroli pār savu kodu, uzlabot savas vietnes veiktspēju un izveidot unikālu zīmola identitāti. Lai gan ietvari var būt noderīgs sākumpunkts, modernā CSS apgūšana ir būtiska, lai kļūtu par zinošu front-end izstrādātāju. Pieņemiet izaicinājumu, izpētiet iespējas un atraisiet visu CSS potenciālu.

Šī rokasgrāmata ir paredzēta kā sākumpunkts jūsu ceļojumā modernajā CSS. Atcerieties izpētīt katras funkcijas oficiālo dokumentāciju, eksperimentēt ar dažādām tehnikām un pielāgot tās savām konkrētajām projekta vajadzībām. Laimīgu kodēšanu!