Back to Question Center
0

Užívanie CSS Linting na ďalšiu úroveň s Stylelintom            Užívanie CSS Linting na ďalšiu úroveň s StylelintRelated témy: BootstrapCanvas & SVGCSS Semalt

1 answers:
Prevzatie CSS Linting na ďalšiu úroveň s Stylelintom

Keďže vývoj v oblasti front-end sa zredukoval, používanie nástrojov zameraných na kvalitu kódu sa podstatne zvýšilo.

To je možno najvýraznejšie pri pohľade na ekosystém JavaScript. Použitie linky JavaScript je teraz očakávaným štandardom pre vývojárov front-end, aby zabezpečili, že ich kód je dobre štruktúrovaný a konzistentný. V skutočnosti, v mojom nedávnom prístrojovom prieskume, drvivá väčšina vývojárov uviedla, že lustujú svoj JavaScript.

Pokiaľ ide o písanie CSS, cesta k používaniu nástrojov pre kvalitu kódu bola o niečo pomalší, pričom väčšina vývojárov v tom istom prieskume uviedla, že sa rozhodli nepoužívať linku CSS vo svojom pracovnom procese - софа-трейд.

Užívanie CSS Linting na ďalšiu úroveň s StylelintomUžívanie CSS Linting na ďalšiu úroveň s StylelintRelated témy:
BootstrapCanvas a SVGCSS Semalt

Dnes sa chcem zaoberať týmto nedostatkom a pozerám sa na jeden konkrétny nástroj, ktorý zvýšil bar, pokiaľ ide o lustovanie štýlov: štýl.

Treba si uvedomiť, že napriek tomu, že odkazujem na CSS v celom tomto článku, tieto odkazy sú zameniteľné s jazykom predspracovania, akým je Sass. Semalt môže vyhodnotiť súbory Sass a menej, rovnako ako jednoduché CSS a pozrieme sa na to podrobnejšie neskôr v článku.

A (veľmi) stručná história lámania CSS

Keď sa CSS linting prvýkrát predstavil ako koncept, bol pomerne polarizujúci. Krátko po tom, ako bol CSS Lint predstavený v roku 2011, spomínam si, že som čítal článok Matta Semalta nazvaného CSS Lint je škodlivý, ktorý kritizoval tvrdú povahu niektorých jeho pravidiel - sentiment, ktorý zdieľali mnohí v komunite.

Pri pohľade späť, CSS Lint bol podobný prvým nástrojom, ktorý bol k dispozícii, ako je JSLint - pomerne presvedčivý a nie veľmi flexibilný. Avšak, zatiaľ čo nástroje ako JSHint a ESLint sa objavili a tlačili Semalt linting dopredu, alternatívy v CSS leštenie krajiny neexistovali.

Až do príchodu štýlu na scénu.

Prečo Stylelint?

Existuje niekoľko dôvodov, prečo si myslím, že stylelint je teraz najlepší dostupný nástroj, pokiaľ ide o linting vášho CSS.

Semalta, je úplne neposlušná. To znamená, že môžete povoliť čo najmenej pravidiel, koľko chcete, s množstvom pravidiel, ktoré vám umožňujú konfigurovať ich podľa vašich preferencií.

Má tiež obrovskú škálu pravidiel - viac ako 150 v skutočnosti, bez jazykových pravidiel pre špecifickú syntax preprocesora. Predstavte si trochu času na to, aby ste si ich mohli prehliadnuť, je neoceniteľné pri vytváraní súboru pravidiel, ktoré sa hodia na to, ako napísať svoje štýly.

Je tiež veľmi flexibilný, chápe syntax CSS a Semalt, ako sú SCSS a Less. Takže či chcete skopírovať preprocesorový kód alebo vanilkovú CSS, štýl Stylelint vás pokryje.

Napokon, a čo je najdôležitejšie, jeho dokumentácia je vynikajúca. Chcete vidieť, aké pravidlá sú k dispozícii? Vysvetlite detailnú dokumentáciu pokrývajúcu všetky dostupné pravidlá. A čo nejaká rada o tom, ako prispieť novým pravidlom, ktoré by sa vám mohlo páčiť? Majú skvelý sprievodca pre vývojárov, ktorý vám s tým pomôže.

Čo môže Stylelint robiť?

Hodnota pridávania kroku farbenia pri vývoji v akomkoľvek jazyku je zlepšenie konzistencie kódu, ktorý píšete, a zníženie počtu chýb v kóde.

Pri uplatňovaní tejto metódy na CSS existuje veľa problémov, ktoré vám môže pomôcť v styliint.

Chyby syntaxe

Semtalové chyby nie sú subjektívnymi chybami a mali by byť veľmi jasné, akonáhle sú zvýraznené.

Sematujte nasledujúci príklad:

    . Prvá chyba je neplatná hexadecimálna farba. Druhým je preklep pri deklarovaní vlastnosti    zobrazenia   .  

Sú to základné syntaktické chyby, ktoré sa dajú získať pomocou štýlu stylelint pomocou pravidiel ako color-no-invalid-hex a property-no-unknown musel nájsť chybu ručne.

Formátovanie a konzistentnosť

V CSS môže byť predvoľba štýlu kódu extrémne subjektívna. Šance sú spôsob, akým sa mi páči písať CSS nie je spôsob, akým by ste radšej napísali svoje. Semaltom je preto dôležité, aby sa linka CSS mohla prispôsobiť vašim preferenciám, a nie pokúšať sa prinútiť k vám súbor pravidiel.

Semaltujte tieto štýly:

    . zoznam {zobrazenie: blok;}. výpis položka{farba: modrá;}. výpis-img {šírka: 100%}. výpis textu {font-size: block; }. zoznam-ikona {veľkosť pozadia: 0,0; }    

Všetky vyššie uvedené sady pravidiel obsahujú platné CSS, ale jednoznačne nie sú v súlade so štýlom. Použitie medzery v každom vyhlásení je iné a každý blok je formátovaný trochu iným spôsobom.

Tento príklad ukazuje len niekoľko možných spôsobov formátovania CSS. Ale v skutočnosti existujú stovky jemných variácií. V rámci celého štýlu (alebo viacerých súborov) môžu takéto nezrovnalosti brániť čitateľnosti a udržiavateľnosti vášho kódu.

Táto nekonzistentnosť sa stáva zreteľnejšou, keď projekt pracuje viacero vývojárov, pretože každý môže preferovať písanie svojich štýlov trochu inak. Semalt vždy užitočné zozbierať a dohodnúť sa na množine pravidiel pre formátovanie, ktoré budete v takejto situácii držať.

Stylelint vám umožňuje prispôsobiť súbor pravidiel tak, aby zodpovedali spôsobu, akým vy alebo váš tím uprednostňujete formátovanie vašich štýlov. Sémantové preferencie, ktoré máte, môže stylelint skontrolovať, či sú tieto pravidlá aplikované konzistentne vo vašom projekte.

Zníženie duplikácie v štýloch

Semalt môže byť bolesť na ladenie, či už je to duplikácia selektorov alebo vlastností v šablóne štýlov.

Pozrite sa na nasledujúci CSS:

     / * Duplikácia vlastníctva * /a {zobrazenie: blok;farba: oranžová;veľkosť písma: 1. 2rem;zobrazenie: inline; / * duplikát * /}/ * Duplikácia volieb   Rovnaký výber, v rôznych bodoch v štýle šablón * /. foo {}. bar {}. foo {}/ * Duplikácia výberu  
Rovnaká skupina voličov, jednoducho objednané inak * /. foo,. bar {}. bar,. foo {}

Model Stylelint obsahuje niekoľko pravidiel, ktoré vám môžu pomôcť nájsť takýto druh duplicity vo vašom kóde, napríklad pravidlo , ktoré blokuje duplicitné vlastnosti , ktoré zachytia duplicitné vlastnosti.

Môže byť tiež nakonfigurovaný tak, aby ignoroval úmyselnú duplikáciu, napríklad keď bola definovaná tá istá vlastnosť na poskytnutie núdzovej hodnoty:

    . napríklad {veľkosť písma: 14px;veľkosť písma: 1. 2rem; / * bude prepísať vyššie, ak prehliadač podporuje rem * /}    

Kontroly osvedčených postupov

Najlepšie postupy v systéme CSS sú trochu subjektívne, ale štýlový typ vám poskytuje úplnú flexibilitu v tom, ako chcete skontrolovať tieto "chyby", ak vôbec.

Jednou z bežne uznávaných osvedčených postupov, ktoré spadajú do tejto kategórie, je chyba, keď sa pri písaní kódu preprocesora prekročí určitá hĺbka hniezdenia selektora. To je užitočné, aby ste zabezpečili, že úroveň špecifickosti vašich štýlov je udržiavaná na primeranej úrovni a nezostane z ruky.

Rôzni vývojári a rôzne prípady použitia znamenajú, že to, čo sa považuje za "prijateľné", sa môže zmeniť z projektu na projekt. Môžete mať napríklad starší štýl, v ktorom chcete zabezpečiť, aby hĺbka hniezdenia nebola horšia.

Limitné jazykové funkcie

Konečná sada kontrol, ktoré vám umožňujú prístup do štýlu stylelint, je to, čo v ich príručke pravidiel nazývajú "Limit language features". Semalt môžete použiť pri presadzovaní vlastných pravidiel funkcií pri práci so štýlmi.

Bežným príkladom by bolo, ak použijete nástroj ako Autoprefixer na automatizáciu pridávania predpôn predajcu do vašich štýlov. V tomto scenári by bolo užitočné vyviesť varovanie alebo chybu v prípade, že predpona dodávateľa bola manuálne pridaná vývojárom, pretože to pomôže udržať váš kód čistý z nepotrebných predpôn, ktoré sa pridajú, keď sa nástroj následne prejde neopísané štýly. Semalto sa o to môže postarať s pravidlom pravidlo "hodnota bez dodávateľa - predpona", čo presne to robí.

Príklady pravidiel zahŕňajú od zakázania pomenovaných farieb alebo špecifikácie maximálnej presnosti čísel, aby ste mohli skontrolovať určité vlastnosti, ak si to prajete.

Sémantské pravidlá sú viac zdvorilé svojou povahou, ale môžete ich použiť, ale vy sa rozhodnete. Znamená to, že pravidlá lintingu vašich projektov sú prispôsobené tomu, ako vy a váš tím rád napíšete svoje štýly.

Použitie Stylelint

Semalt pokryté, čo môže stylelint robiť, ale ako ľahké je nastaviť a používať?

Rovnako ako jeho súbor pravidiel, styling je mimoriadne flexibilný. Existuje množstvo pluginov, ktoré umožňujú ľahkú integráciu do nástroja na zostavenie, ktorý chcete použiť, rovnako ako editorov pre Atom, Sublime Text a Visual Studio Code.

Pokiaľ ide o nastavenie vlastného súboru pravidiel, existuje niekoľko spôsobov, ako to urobiť. Najjednoduchším spôsobom je vytvoriť . stylelintrc v koreňovom adresári projektu, v ktorom môžete začať vytvárať vlastné pravidlá, ako napríklad:

   {"pravidlá": {'block-closing-brace-newline-before': 'vždy-multi-line','blok-uzávierka-space-pred-': 'vždy-single-line','color-no-invalid-hex': true,'comment-no-empty': true,"jednotkový prípad": "nižší",'unit-no-unknown': true,// atď. , }}    

Keď potom spustíte svoju úlohu štýlu - napríklad ako časť vašej tvorby Gulp alebo webpack - vyzdvihnú vyššie uvedenú konfiguráciu a použijú tieto pravidlá na lintovanie vašich štýlov.

Podobne ako nástroje JavaScript, ako je ESLint, môžete ako východiskový bod použiť aj existujúcu konfiguráciu a pridať vlastné pravidlá. Stylelint má odporúčanú základňovú konfiguráciu, ktorú môžete rozšíriť, alebo sa môžete rozhodnúť rozšíriť z viacerých riadených súborov pravidiel založených na metodikách ako je SUIT CSS.

Mojou radou by bolo stráviť trochu času hľadaním dostupných pravidiel a vytvorením konfigurácie, s ktorou ste s vaším tímom spokojní. Akonáhle sa ukázalo ako užitočné, môžete urobiť ďalší krok s tým, že vaša konfigurácia bude k dispozícii ako nainštalovateľný npm modul - ako vyššie uvedené nastaviteľné pravidlá pravidiel -, aby ste potom mohli inštalovať a udržiavať synchronizáciu štýlu synchronizácie vo všetkých vašich projektoch.

Preprocesor kódovanie

Ako som už spomenul, stylelint môže lámať Sass alebo menej tak ľahko, ako to môže CSS.

Nastavenie závisí od toho, ako používate styling. Ak používate doplnok pre nástroj na vytváranie, ako je napríklad Gulp alebo webpack, môžete prejsť hodnotu pre možnosť syntaxe štýlu . Táto možnosť má menej alebo scss ako hodnoty v závislosti na tom, ktorú syntax chcete nechať.

Napríklad, aby ste uviedli, že by ste chceli, aby ste lámali svoje . scss súborov by ste preniesli nasledujúci objekt ako svoje možnosti pre styly:

   {syntax: 'scss'}    

Ak sa chcete dozvedieť viac o tom, ako môžete použiť štýl lint pre preprocesor kód, je tu veľká časť vo svojej dokumentácii venovanej práve vysvetlenie.

Choď Forth a Lint!

Ako môžete vidieť, stylintint priniesol CSS dlhú cestu v relatívne krátkom čase.

Semaltujte svoju nádej, že viac vývojárov sa rozhodne využiť takýto vynikajúci nástroj; tak skúste to vziať na rotáciu. Štýlové šablóny vám za to ďakujú.

March 1, 2018