Eesti

Põhjalik juhend Tailwind CSS-i ohutu nimekirja kohta, mis käsitleb dünaamiliste klassinimede genereerimist, tootmise optimeerimist ja parimaid tavasid oma stiililehtede kaitsmiseks.

Tailwind CSS-i ohutu nimekiri: dünaamiliste klassinimede kaitse tootmiskeskkonnas

Tailwind CSS on utiilipõhine CSS-raamistik, mis pakub laia valikut eelmääratletud klasse teie veebirakenduste stiilimiseks. Kuigi selle utiilipõhine lähenemine pakub arenduses võrratut paindlikkust ja kiirust, võib see ilma nõuetekohase haldamiseta viia suurte CSS-failideni tootmiskeskkonnas. Siin tulebki appi ohutu nimekiri (ingl k *safelisting* ehk *whitelisting*). Ohutu nimekiri on protsess, mille käigus teavitate Tailwind CSS-i selgesõnaliselt, milliseid klassinimesid kavatsete oma projektis kasutada, võimaldades sel ehitusprotsessi käigus kõik muud kasutamata klassid eemaldada. See vähendab dramaatiliselt teie CSS-faili suurust, mis omakorda kiirendab lehe laadimisaegu ja parandab jõudlust.

Miks on ohutut nimekirja vaja?

Tailwind CSS genereerib vaikimisi tuhandeid CSS-klasse. Kui lisaksite kõik need klassid oma tootmisversiooni, isegi kui kasutate neist vaid väikest osa, oleks teie CSS-fail asjatult suur. See mõjutab teie veebisaidi jõudlust mitmel viisil:

Ohutu nimekiri lahendab need probleemid, kaasates valikuliselt ainult need klassid, mida te tegelikult kasutate, tulemuseks on oluliselt väiksem ja tõhusam CSS-fail. Kaasaegsed veebiarenduse praktikad nõuavad lihtsat ja optimeeritud koodi. Ohutu nimekirja kasutamine Tailwind CSS-iga ei ole lihtsalt parim tava; see on vajalik suure jõudlusega veebirakenduste pakkumiseks.

Dünaamiliste klassinimede väljakutsed

Kuigi ohutu nimekiri on ülioluline, tekitab see väljakutse, kui kasutate dünaamilisi klassinimesid. Dünaamilised klassinimed on need, mis genereeritakse või muudetakse käitusajal, sageli põhinedes kasutaja sisendil, API-st hangitud andmetel või teie JavaScripti koodis oleval tingimusloogikal. Neid klasse on Tailwind CSS-i esialgse ehitusprotsessi ajal raske ennustada, sest tööriistad ei "näe", et neid klasse vaja läheb.

Näiteks kujutage ette stsenaariumi, kus rakendate dünaamiliselt taustavärve vastavalt kasutaja eelistustele. Teil võib olla värvivalikute komplekt (nt `bg-red-500`, `bg-green-500`, `bg-blue-500`) ja te kasutate JavaScripti, et rakendada sobiv klass vastavalt kasutaja valikule. Sellisel juhul ei pruugi Tailwind CSS neid klasse lõplikku CSS-faili lisada, kui te neid selgesõnaliselt ohutusse nimekirja ei lisa.

Teine levinud näide hõlmab dünaamiliselt genereeritud sisu koos seotud stiilidega. Kujutage ette, et ehitate armatuurlauda, mis kuvab erinevaid vidinaid, millest igaühel on oma tüübist või andmeallikast sõltuv unikaalne stiil. Igale vidinale rakendatavad spetsiifilised Tailwind CSS-i klassid võivad sõltuda kuvatavatest andmetest, mis muudab nende eelneva lisamise ohutusse nimekirja keeruliseks. See kehtib ka komponenditeekide kohta, kus soovite, et lõppkasutaja saaks kasutada teatud CSS-klasse.

Dünaamiliste klassinimede ohutusse nimekirja lisamise meetodid

Tailwind CSS-is on dünaamiliste klassinimede ohutusse nimekirja lisamiseks mitu strateegiat. Parim lähenemine sõltub teie projekti keerukusest ja dünaamilisuse astmest.

1. `safelist` valiku kasutamine failis `tailwind.config.js`

Kõige otsekohesem meetod on kasutada oma `tailwind.config.js` failis `safelist` valikut. See valik võimaldab teil selgesõnaliselt määrata klassinimed, mis tuleks alati lõplikku CSS-faili lisada.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  safelist: [
    'bg-red-500',
    'bg-green-500',
    'bg-blue-500',
    'text-xl',
    'font-bold',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Plussid:

Miinused:

2. Regulaaravaldiste kasutamine `safelist`'is

Keerulisemate stsenaariumide jaoks saate `safelist` valiku sees kasutada regulaaravaldisi. See võimaldab teil sobitada klassinimede mustreid, selle asemel et igaüht eraldi loetleda.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  safelist: [
    /^bg-.*-500$/,
    /^text-./, // näide kõigi tekstiklasside sobitamiseks
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Selles näites sobitub regulaaravaldis `/^bg-.*-500$/` iga klassinimega, mis algab `bg-`, millele järgnevad mis tahes sümbolid (`.*`), millele järgneb `-500`. See hõlmab klasse nagu `bg-red-500`, `bg-green-500`, `bg-blue-500` ja isegi `bg-mycustomcolor-500`.

Plussid:

Miinused:

3. Dünaamilise ohutu nimekirja genereerimine ehitusprotsessi ajal

Väga dünaamiliste stsenaariumide puhul, kus klassinimed on tõeliselt ettearvamatud, saate ehitusprotsessi ajal genereerida dünaamilise ohutu nimekirja. See hõlmab teie koodi analüüsimist, et tuvastada dünaamilised klassinimed ja seejärel lisada need `safelist` valikusse enne Tailwind CSS-i käivitamist.

See lähenemine hõlmab tavaliselt ehitusskripti (nt Node.js skripti) kasutamist, et:

  1. Parsida oma JavaScripti, TypeScripti või muid koodifaile.
  2. Tuvastada potentsiaalsed dünaamilised klassinimed (nt otsides stringi interpoleerimist või tingimusloogikat, mis genereerib klassinimesid).
  3. Genereerida tuvastatud klassinimesid sisaldav `safelist` massiiv.
  4. Uuendada oma `tailwind.config.js` faili genereeritud `safelist` massiiviga.
  5. Käivitada Tailwind CSS-i ehitusprotsess.

See on kõige keerulisem lähenemine, kuid see pakub suurimat paindlikkust ja täpsust väga dünaamiliste klassinimede käsitlemisel. Saate kasutada tööriistu nagu `esprima` või `acorn` (JavaScripti parserid), et oma koodibaasi sel eesmärgil analüüsida. Selle lähenemise puhul on ülioluline omada head testide katvust.

Siin on lihtsustatud näide, kuidas seda võiksite rakendada:

// build-safelist.js
const fs = require('fs');
const glob = require('glob');

// Funktsioon potentsiaalsete Tailwindi klasside eraldamiseks stringist (väga lihtne näide)
function extractClasses(content) {
  const classRegex = /(?:class(?:Name)?=["'])([^"']*)(?:["'])/g;  // Täiustatud regulaaravaldis
  let match;
  const classes = new Set();
  while ((match = classRegex.exec(content)) !== null) {
    const classList = match[1].split(/\s+/);
    classList.forEach(cls => {
      // Täpsustage seda veelgi, et kontrollida, kas klass *näeb välja* nagu Tailwindi klass
      if (cls.startsWith('bg-') || cls.startsWith('text-') || cls.startsWith('font-')) {  // Lihtsustatud Tailwindi klassi kontroll
        classes.add(cls);
      }
    });
  }
  return Array.from(classes);
}


const files = glob.sync('./src/**/*.{js,jsx,ts,tsx}'); // Kohandage glob-mustrit vastavalt oma failidele

let allClasses = [];
files.forEach(file => {
  const content = fs.readFileSync(file, 'utf-8');
  const extractedClasses = extractClasses(content);
   allClasses = allClasses.concat(extractedClasses);
});

const uniqueClasses = [...new Set( allClasses)];

// Lugege Tailwindi konfiguratsioonifaili
const tailwindConfigPath = './tailwind.config.js';
const tailwindConfig = require(tailwindConfigPath);

// Uuendage ohutut nimekirja
tailwindConfig.safelist = tailwindConfig.safelist || []; // Veenduge, et ohutu nimekiri eksisteerib
tailwindConfig.safelist = tailwindConfig.safelist.concat(uniqueClasses);

// Kirjutage uuendatud konfiguratsioon faili tagasi
fs.writeFileSync(tailwindConfigPath, `module.exports = ${JSON.stringify(tailwindConfig, null, 2)}`);

console.log('Tailwindi konfiguratsiooni ohutu nimekiri on edukalt uuendatud!');

Ja muutke oma `package.json` faili, et see käivituks enne teie ehitusetappi:

{"scripts": {
  "build": "node build-safelist.js && next build",  // Või teie ehituskäsk
  ...
}}

Olulised kaalutlused koodi parsimisel:

Plussid:

Miinused:

4. Reasiseste stiilide kasutamine viimase abinõuna (üldiselt ei soovitata)

Kui teil on äärmiselt dünaamilised stiilid, mida ei saa ühegi ülaltoodud meetodiga lihtsalt ohutusse nimekirja lisada, võite kaaluda reasiseste stiilide kasutamist viimase abinõuna. Siiski ei ole see lähenemine üldiselt soovitatav, kuna see nullib CSS-raamistiku nagu Tailwind CSS kasutamise eesmärgi.

Reasisesed stiilid rakendatakse otse HTML-elementidele, mitte ei defineerita neid CSS-failis. See võib põhjustada mitmeid probleeme:

Kui peate kasutama reasiseseid stiile, proovige piirata nende kasutamist ainult kõige dünaamilisemate ja ettearvamatumate stiilide puhul. Kaaluge JavaScripti teekide kasutamist, mis aitavad teil reasiseseid stiile tõhusamalt hallata, näiteks Reacti `style` prop või Vue.js'i `:style` sidumine.

Näide (React):

function MyComponent({ backgroundColor }) {
  return (
    
{/* ... */}
); }

Tailwind CSS-i ohutu nimekirja parimad tavad

Et tagada teie Tailwind CSS-i ohutu nimekirja strateegia tõhusus ja hooldatavus, järgige neid parimaid tavasid:

Näidisstsenaariumid rahvusvaheliste mõjudega

Ohutu nimekiri muutub veelgi olulisemaks, kui arvestada rakendusi, millel on rahvusvahelistamise (i18n) ja lokaliseerimise (l10n) funktsioonid.

Paremalt vasakule (RTL) keeled

Keelte puhul nagu araabia, heebrea ja pärsia keel, kulgeb tekst paremalt vasakule. Tailwind CSS pakub utiliite RTL-paigutuste käsitlemiseks, näiteks `rtl:text-right` ja `ltr:text-left`. Need utiliidid lisatakse aga lõplikku CSS-faili ainult siis, kui need on selgesõnaliselt ohutusse nimekirja lisatud või kui need tuvastatakse teie lähtekoodis.

Kui teie rakendus toetab RTL-keeli, veenduge, et lisate asjakohased RTL-utiliidid ohutusse nimekirja, et tagada teie paigutuste korrektne kuvamine RTL-keskkondades. Näiteks võite kasutada regulaaravaldist nagu `/^(rtl:|ltr:)/`, et lisada ohutusse nimekirja kõik RTL- ja LTR-utiliidid.

Erinevad fondiperekonnad

Erinevad keeled nõuavad märkide korrektseks kuvamiseks erinevaid fondiperekondi. Näiteks hiina, jaapani ja korea keeled nõuavad fonte, mis toetavad CJK-märke. Samamoodi võivad aktsentidega märkidega keeled nõuda fonte, mis sisaldavad neid märke.

Kui teie rakendus toetab mitut keelt, peate võib-olla kasutama erinevate keelte jaoks erinevaid fondiperekondi. Saate kasutada CSS-i `@font-face` reeglit kohandatud fondiperekondade määratlemiseks ja seejärel kasutada Tailwind CSS-i nende rakendamiseks konkreetsetele elementidele. Veenduge, et lisate oma CSS-is kasutatavad fondiperekondade nimed ohutusse nimekirja, et tagada nende kaasamine lõplikku CSS-faili.

Näide:

/* Teie globaalses CSS-failis */
@font-face {
  font-family: 'Noto Sans SC';
  src: url('/fonts/NotoSansSC-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans SC';
  src: url('/fonts/NotoSansSC-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* Teie tailwind.config.js failis */
module.exports = {
  // ...
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Noto Sans SC', ...],
      },
    },
  },
  safelist: [
    'font-sans', // tagab, et font-sans on alati kaasatud
  ],
};

Kultuurilised erinevused stiilimises

Mõnel juhul võivad stiilieelistused kultuuriti erineda. Näiteks võivad värvide seosed ühest kultuurist teise oluliselt erineda. Samamoodi võib tühiku ja tüpograafia kasutamist mõjutada kultuurinormid.

Kui teie rakendus on suunatud globaalsele publikule, olge teadlik neist kultuurilistest erinevustest ja kohandage oma stiili vastavalt. See võib hõlmata erinevate CSS-klasside kasutamist erinevate lokaatide jaoks või kasutajatele oma stiilieelistuste kohandamise lubamist.

Kokkuvõte

Tailwind CSS-i ohutu nimekiri on tootmiskeskkondade jaoks ülioluline optimeerimistehnika. Määrates selgesõnaliselt klassinimed, mis tuleks lõplikku CSS-faili lisada, saate selle suurust oluliselt vähendada, mis viib kiiremate lehe laadimisaegade ja parema jõudluseni. Kuigi dünaamilised klassinimed kujutavad endast väljakutset, on nende ohutusse nimekirja lisamiseks mitu strateegiat, alates lihtsatest selgesõnalistest loeteludest kuni keerukama dünaamilise ohutu nimekirja genereerimiseni. Järgides selles juhendis toodud parimaid tavasid, saate tagada, et teie Tailwind CSS-i ohutu nimekirja strateegia on tõhus, hooldatav ja kohandatav teie projekti ainulaadsetele vajadustele.

Pidage meeles, et oma veebiarendusprojektides tuleb esikohale seada kasutajakogemus ja jõudlus. Ohutu nimekirja kasutamine Tailwind CSS-iga on võimas tööriist nende eesmärkide saavutamiseks.