Stylelint va Prettier: CSS kod sifati

Qisqacha: Stylelint — CSS uchun linter: brauzer jim tashlab ketadigan xatolarni (noma'lum xususiyat, noto'g'ri qiymat, takror) va jamoa qoidalarining buzilishini topadi. U npm install --save-dev stylelint stylelint-config-standard bilan o'rnatiladi, qoidalari .stylelintrc.json da sozlanadi va npx stylelint "**/*.css" bilan ishlaydi. Prettier kod ko'rinishini tekislaydi, Stylelint — ma'nosini tekshiradi; ikkalasi bitta npm run check da birlashadi.

Bu darsda

• Linter va formatter farqini tushuntira olasiz.
• Stylelint'ni o'rnatib, stylelint-config-standard bilan CSS'ni tekshirasiz va xabarlarini o'qiysiz.
• Qoidalarni yoqasiz, o'chirasiz va sozlaysiz: !important, BEM nom namunasi, jismoniy xususiyatlar, xususiyatlar tartibi.
• --fix ni xavfsiz ishlatasiz va qoidani bitta qatorda asoslab o'chirasiz.
• Portfolio'ning npm run check iga Stylelint'ni qo'shasiz.

Oldin bilishingiz kerak: HTML kod uslubi, PostCSS va Autoprefixer, Kaskad, Mantiqiy xususiyatlar.

1. Nega bu kerak?

CSS nima darsida brauzerning eng katta kamchiligini ko'rgan edik: xato qilsangiz, u sizga aytmaydi. Mana bitta qator:

<style>
  .taom-karta {
    padding: 1rem;
    border: 2px solid #2f6b3;
    font-family: system-ui, sans-serif;
  }
  .aksiya {
    padding: 1rem;
    border: 2px solid #b4461a;
    font-family: system-ui, sans-serif;
  }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
  <p>35 000 so'm</p>
</article>
<p class="aksiya">Bugun ko'k choy — 5 000 so'm!</p>

Nimaga qarang: aksiyada qizg'ish chegara bor, osh kartasida esa umuman yo'q. Rang kodida bitta belgi tushib qolgan: #2f6b3 — beshta belgi, hex rang esa 3, 4, 6 yoki 8 belgidan iborat bo'ladi. Brauzer butun border deklaratsiyasini jim tashladi. Chrome'da tekshirdik: konsolda hech qanday xabar yo'q.

Bunday xatoni ko'z bilan topish qiyin — ayniqsa 700 qatorli faylda. HTML kod uslubi darsida HTML uchun html-validate ishlatgan edik: u teglar va atributlarni tekshiradi. CSS uchun ham shunday "nazoratchi" bor — Stylelint.

O'xshatish: imtihon insholarini tekshiruvchi o'qituvchi. Imlo xatolarini, noto'g'ri so'zlarni, qoidalarga zid joylarni qizil ruchka bilan belgilaydi. U inshoni siz uchun qayta yozmaydi — faqat ko'rsatadi. Ba'zi mayda xatolarni esa o'zi tuzatib qo'yishi mumkin.

2. Linter va formatter

Ikki yangi so'z:

• Formatter (formatter) — kodning tashqi ko'rinishini (bo'sh joy, qator, chekinish) bir xil qiladigan dastur. Prettier aynan shunday — uni HTML kod uslubi darsida ishlatgan edik.
• Linter (linter) — kodni ishga tushirmasdan o'qib, xato va shubhali joylarni topadigan dastur. Nomi 1978-yildagi C tili vositasi lint dan: kiyimdagi mayda tuklarni ("lint") terib oladigan cho'tka.

Bu ikki vosita turini adashtirmaslik muhim:

Prettier CSS'ni ham tekislaydi. Tartibsiz yozilgan kod:

.narx{color:#B4461A;font-weight:bold}
.taom-karta   .narx ,.aksiya{
    padding:0 1rem;margin:0}

npx prettier dan keyin (Prettier 3.9.9):

.narx {
  color: #b4461a;
  font-weight: bold;
}
.taom-karta .narx,
.aksiya {
  padding: 0 1rem;
  margin: 0;
}

Har deklaratsiya — alohida qatorda, har selektor — alohida qatorda, hex kichik harfda. Lekin #2f6b3 ni Prettier "tuzatmaydi" — u faqat shaklga qaraydi. Ma'noni Stylelint tekshiradi.

3. Stylelint'ni o'rnatish

3.1 Paketlar

«Bahor» papkasida (package.json bor bo'lsa, npm init -y kerak emas):

npm install --save-dev stylelint stylelint-config-standard
npx stylelint --version

Oxirgi buyruq javobi:

17.15.0

Ikki paket:

• stylelint — dasturning o'zi. Unda 100 dan ortiq qoida (rule) bor, lekin standart holatda hammasi o'chiq.
• stylelint-config-standard — tayyor sozlama to'plami (shareable config): tajribali dasturchilar tanlagan qoidalar ro'yxati. Biz uni 40.0.0 versiyada o'rnatdik.

3.2 Sozlama fayli

Loyiha ildizida .stylelintrc.json:

{
  "extends": ["stylelint-config-standard"]
}

extends — "shu to'plamdagi qoidalarni ol". html-validate'dagi extends bilan bir xil g'oya (HTML kod uslubi).

3.3 Birinchi tekshiruv

assets/css/asosiy.css ga ataylab xatolar qo'yamiz:

.taomKarta {
  colr: #2f6b3a;
  border: 2px solid #2f6b3;
}

.narx {
  color: #b4461a;
  color: #b4461a;
  font-weight: bold !important;
}

.aksiya a:hover {
  color: #1a5d1a;
}

a {
  color: #2f6b3a;
}

Tekshiruv — fayl yo'li qo'shtirnoqda, ** — "hamma ichki papkalar" (HTML kod uslubi darsidagi kabi):

npx stylelint "assets/css/**/*.css"

assets/css/asosiy.css
   1:1   ✖  Expected class selector ".taomKarta" to be kebab-case                        selector-class-pattern
   2:3   ✖  Unknown property "colr"                                                      property-no-unknown
   3:21  ✖  Unknown value "#2f6b3" for property "border"                                 declaration-property-value-no-unknown
   7:3   ✖  Duplicate property "color"                                                   declaration-block-no-duplicate-properties
  16:1   ✖  Expected selector "a" to come before selector ".aksiya a:hover", at line 12  no-descending-specificity

✖ 5 problems (5 errors, 0 warnings)
  1 error potentially fixable with the "--fix" option.

Har qatorda: qator:ustun, ✖ belgisi, xabar va o'ng chetda qoida nomi. Qoida nomi eng foydali qism — uni qidiruvga yozsangiz, Stylelint saytida qoidaning to'liq tavsifi chiqadi. Xabarlar:

Oxirgisi tushuntirishni talab qiladi. .aksiya a:hover ning og'irligi (0,2,1), a niki (0,0,1) (Specificity). Qoida shunday deydi: "og'irroq selektor yengilroqdan keyin tursin". Aks holda faylni o'qigan odam "pastdagi a yutadi" deb o'ylashi mumkin, aslida esa yuqoridagi og'ir selektor yutadi. Bu xato emas, o'qishni chalkashtiradigan joy haqida ogohlantirish.

Oxirgi qator: "1 ta xatoni --fix bilan tuzatish mumkin". !important esa hech narsa demadi — standart to'plamda u taqiqlanmagan. Buni o'zimiz yoqamiz.

Yana bir sinov. CSS nima darsida ko'rgan xatoni — // bilan yozilgan izohni — fayl boshiga qo'shamiz: // Menyu sahifasi. CSS'da izoh faqat /* */ bilan yoziladi. Stylelint Invalid double-slash CSS comment ("CSS'da qo'sh qiya chiziqli izoh yaroqsiz", qoida no-invalid-double-slash-comments) xatosini beradi. Qiziq joyi: .taomKarta haqidagi xato esa yo'qoladi. Nega? // izoh bo'lmagani uchun brauzer ham, Stylelint ham uni keyingi qator bilan birga bitta selektor deb o'qiydi: // Menyu sahifasi .taomKarta. Bu buzilgan selektor — unda .taomKarta class'i endi alohida ko'rinmaydi. Xulosa: xatolar qatlam-qatlam, birinchisini tuzatsangiz, ortidagisi chiqadi.

Tekshirib ko'ring: Brauzer colr: #2f6b3a ni nima qiladi va Stylelint nimasi bilan foydali?

4. Qoidalarni sozlash

4.1 Qoida yoqish, o'chirish, sozlash

.stylelintrc.json dagi rules bo'limi to'plamning ustidan yoziladi:

{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "declaration-no-important": true,
    "no-descending-specificity": null
  }
}

• true — qoidani yoqish.
• null — qoidani o'chirish.
• Massiv — qoida va uning sozlamasi: ["qiymat", { qo'shimcha }].

4.2 !important — jamoa qarori

Kaskad darsida "jamoalarda CSS tekshiruvchi vosita !important ni taqiqlashi mumkin" degan edik. Mana u: declaration-no-important. Yuqoridagi faylda endi yangi xato:

   9:21  ✖  Disallowed !important                                                        declaration-no-important

Tarjimasi: "!important taqiqlangan." Lekin display va yashirish darsidagi [hidden] { display: none !important; } — asoslangan istisno edi. Qoidani bitta joyda o'chirish mumkin — buni «--fix va istisnolar» bo'limida ko'ramiz.

4.3 BEM nom namunasi

Standart to'plam class nomlarini kebab-case da talab qiladi — «Bahor» va portfolio nomlari (taom-karta, bron-havola) shunga mos. BEM ishlatadigan jamoa (CSS metodologiyalari) esa blok__element--modifikator ga ruxsat berishi kerak. Qoidaga o'z namunasini beramiz. Namuna — muntazam ifoda (regular expression): matn shaklini tasvirlaydigan maxsus yozuv. Uni o'qishni RegExp asoslari darsida o'rganamiz — hozir tayyorini ishlating:

{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "selector-class-pattern": [
      "^[a-z0-9-]+(__[a-z0-9-]+)?(--[a-z0-9-]+)?$",
      { "message": "BEM nomi kutilgan: blok__element--modifikator" }
    ]
  }
}

Namunani so'zlar bilan o'qisak: "kichik harf, raqam va chiziqcha; keyin ixtiyoriy __element; keyin ixtiyoriy --modifikator". message — xato matnini o'zimiz yozamiz, o'zbekcha. Sinov uchun uchta class (namoyish nomlari, «Bahor»ga ko'chmaydi): .taom-karta__nomi--katta va .taom-karta--yangi o'tadi, .taomKarta esa:

m6/bem.css
  9:1  ✖  BEM nomi kutilgan: blok__element--modifikator  selector-class-pattern

✖ 1 problem (1 error, 0 warnings)

4.4 Jismoniy xususiyatlar

Mantiqiy xususiyatlar darsida portfolio margin-left kabi jismoniy xususiyatlardan margin-inline-start kabi mantiqiylarga o'tgan edi va "Stylelint uchun bunday qoidalar bor" degan edik. Stylelint'ning o'zida ikki universal qoida bor — "shu xususiyatlar taqiqlangan" va "shu xususiyatning shu qiymatlari taqiqlangan":

{
  "rules": {
    "property-disallowed-list": [
      "/^(margin|padding|border)-(top|right|bottom|left)/",
      "/^(top|right|bottom|left)$/"
    ],
    "declaration-property-value-disallowed-list": {
      "text-align": ["left", "right"],
      "float": ["left", "right"]
    }
  }
}

/.../ ichidagi yozuv — yana muntazam ifoda: birinchisi "margin-, padding- yoki border- dan keyin tomon nomi", ikkinchisi — "aynan top, right, bottom yoki left". Endi margin-left: 1rem yozilsa, Stylelint uni to'xtatadi, margin-inline-start esa o'tadi. width va height ga tegmadik — ularning mantiqiy juftlari bor, lekin jismoniy o'lcham ko'p holatda to'g'ri tanlov.

4.5 Xususiyatlar tartibi — plagin

Deklaratsiyalar qaysi tartibda yozilishi haqida bahs ko'p. Stylelint'ning o'zida bunday qoida yo'q — uni plagin qo'shadi:

npm install --save-dev stylelint-order

{
  "extends": ["stylelint-config-standard"],
  "plugins": ["stylelint-order"],
  "rules": {
    "order/properties-alphabetical-order": true
  }
}

plugins — qo'shimcha qoidalar manbai, qoida nomi plagin nomi bilan boshlanadi (order/). stylelint-order 8.1.1 bilan tekshirdik — fayl:

.narx {
  font-weight: bold;
  color: #b4461a;
}

m7/a.css
  3:3  ✖  Expected color to come before font-weight  order/properties-alphabetical-order

✖ 1 problem (1 error, 0 warnings)
  1 error potentially fixable with the "--fix" option.

Tarjimasi: "color font-weight dan oldin kelishi kutilgan." Bu qoida --fix bilan o'zi tartiblaydi — color tepaga chiqdi. Alifbo tartibi — eng oddiy variant. Boshqa jamoalar "joylashuv → o'lcham → matn → rang" guruhlarini tanlaydi (order/properties-order). Qaysi biri — muhim emas, bir xillik muhim. «Bahor» va portfolio'da bu qoidani yoqmaymiz: mavjud fayllarning har bir qoidasini qayta tartiblash foydadan ko'ra ko'proq shovqin beradi.

4.6 SCSS uchun

Sass/SCSS 1 darsidagi fayllar uchun alohida to'plam bor: stylelint-config-standard-scss (17.0.0). U $o'zgaruvchi, @use va // izohni tushunadi va SCSS'ga xos qoidalar qo'shadi:

{
  "extends": ["stylelint-config-standard-scss"]
}

Sinov fayli:

@use "ranglar";

// Taom kartasi
$karta_padding: 1rem;

@mixin kartaSoyasi {
  box-shadow: 0 1px 2px #0002;
}

.taom-karta {
  padding: $karta_padding;
  border: 2px solid ranglar.$asosiy;

  @include kartaSoyasi;
}

scss/_karta.scss
  4:1  ✖  Expected variable name "karta_padding" to be kebab-case  scss/dollar-variable-pattern
  6:8  ✖  Expected mixin name "kartaSoyasi" to be kebab-case       scss/at-mixin-pattern

// izoh xato bo'lmadi — SCSS'da u to'g'ri. O'zgaruvchi va mixin nomlari esa class nomlaridek kebab-case bo'lishi kutiladi: $karta-padding, karta-soyasi.

5. --fix va istisnolar

5.1 --fix: avtomatik tuzatish

Ba'zi qoidalar xatoni o'zi tuzata oladi — xabar oxiridagi "potentially fixable" qatori shu haqda:

npx stylelint "assets/css/**/*.css" --fix

Stylelint tuzata olganini faylga yozadi va qolganini ko'rsatadi. Qulay — lekin ko'r-ko'rona ishlatmang. Keyinroq, portfolio qadamida, --fix iOS uchun kerakli qatorni buzib qo'yganini ko'rasiz.

Qoida: avval xabarlarni o'qing, qaror qabul qiling, keyin --fix. Va --fix dan keyin natijani ko'zdan kechiring.

5.2 Istisno: qoidani bir joyda o'chirish

Qoida umuman to'g'ri, lekin bitta joyda ataylab buziladi — shunda o'sha qatorning ustiga maxsus izoh:

button {
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-user-select: none;
  user-select: none;
}

• stylelint-disable-next-line — "keyingi qatorda o'chir".
• Undan keyin — qaysi qoida. Qoida nomini yozmasangiz, hamma qoida o'chadi — bu xavfli.

Sababini ham yozing: -- dan keyin, masalan ... property-no-vendor-prefix -- Safari */. Olti oydan keyin kodni o'qigan odam (siz ham) nega shunday qilinganini biladi. Sabab bilan izoh uzun bo'lsa, ikkinchi shakl qulay — oraliq: stylelint-disable qoidani o'chiradi, stylelint-enable qayta yoqadi.

/* stylelint-disable declaration-no-important -- hidden himoyasi */
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}
/* stylelint-enable declaration-no-important */

Ikkala faylni Stylelint va Prettier bilan tekshirdik — 0 xato. enable ni unutmang: usiz qoida fayl oxirigacha o'chiq qoladi.

Ro'yxatlar stili darsidagi html-validate izohini eslang — html-validate-disable-next no-redundant-role -- Safari. G'oya bir xil: istisno — bitta joyda, nomi va sababi bilan.

Tekshirib ko'ring: Hamkasbingiz faylning boshiga /* stylelint-disable */ yozdi va "endi xato yo'q" dedi. Nima deysiz?

6. Prettier va Stylelint birga

6.1 To'qnashuv bormi?

Ilgari Stylelint'da chekinish, bo'sh joy va qavslar joyi haqida ham qoidalar bor edi — ular Prettier bilan "janjallashardi": biri tekislagan joyni ikkinchisi xato derdi. Buni o'chirish uchun maxsus stylelint-config-prettier to'plami ishlatilardi.

Stylelint 16-versiyada bu formatlash qoidalari olib tashlangan — ular Prettier'ning ishi. Shuning uchun bugun ikkalasi ziddiyatsiz ishlaydi, qo'shimcha to'plam kerak emas. Standart to'plamda faqat bir nechta "bo'sh qator" qoidalari qolgan (comment-empty-line-before kabi) — Prettier mavjud bo'sh qatorlarni saqlaydi, shuning uchun ular ham to'qnashmaydi. Tekshirdik: stylelint --fix dan keyin prettier --check "All matched files use Prettier code style!" dedi.

Tartib: avval stylelint --fix, keyin prettier --write. Prettier oxirgi so'zni aytadi — fayl ko'rinishi har doim bir xil bo'ladi.

flowchart LR
  A["CSS yozasiz"] --> B["VS Code:<br/>Stylelint chizig'i"]
  B --> C["npm run format<br/>Prettier"]
  C --> D["npm run check"]
  D --> E{"Xato bormi?"}
  E -->|Ha| A
  E -->|Yo'q| F["Deploy"]

Nimaga qarang: xato uch joyda ushlanadi — yozayotganda (VS Code), tekshiruvda (npm run check) va keyinroq, Git'ni o'rgangach, commit oldidan.

6.2 VS Code'da

VS Code kengaytmalar do'konida Stylelint (nashriyotchi: Stylelint, ID stylelint.vscode-stylelint) kengaytmasini o'rnating. U loyihadagi .stylelintrc.json ni o'qiydi va xatolarni yozayotgan paytingizdayoq to'lqinli chiziq bilan ko'rsatadi. VS Code sozlamalari (.vscode/settings.json, VS Code sozlamalari darsida ko'rgansiz):

{
  "stylelint.validate": ["css", "scss"],
  "css.validate": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit"
  }
}

• stylelint.validate — qaysi fayllarni tekshirsin.
• css.validate: false — VS Code'ning o'z CSS tekshiruvini o'chiradi, aks holda bitta xato ikki marta ko'rinadi.
• codeActionsOnSave — saqlaganda tuzatiladigan xatolarni tuzatadi. Yuqoridagi --fix ogohlantirishini unutmang.

6.3 Commit oldidan: lint-staged

Katta jamoalarda tekshiruv kod saqlanishidan oldin avtomatik ishlaydi. lint-staged — faqat o'zgargan fayllarni tekshiradigan vosita. U Git bilan ishlaydi. Git — fayllar tarixini saqlaydigan dastur, commit esa shu tarixdagi bitta "saqlash nuqtasi" — o'yindagi saqlanish kabi. Git'ni 07-qismda o'rganasiz, commit oldidan tekshiruvni avtomatik ishga tushirishni esa Husky va lint-staged darsida — hozir bilish shart emas. Hozir faqat sozlamaning ko'rinishini tanib qo'ying — package.json da:

{
  "lint-staged": {
    "*.css": ["stylelint --fix", "prettier --write"]
  }
}

"O'zgargan har .css faylga avval Stylelint tuzatishi, keyin Prettier." Sinov repozitoriysida tekshirdik (lint-staged 16.4.0): .narx { color: #B4461A; font-weight:bold } kabi tartibsiz fayl ikki qadamdan keyin toza shaklga keldi.

7. Ko'p uchraydigan xatolar

7.1 Qo'shtirnoqsiz glob

npx stylelint g/**/*.css — qo'shtirnoqsiz. Git Bash namunani Stylelint'ga berishdan oldin o'zi ochadi, lekin ** ni oddiy * deb tushunadi — faqat bir pog'ona ichkaridagi fayllarni oladi. Tekshirdik: g/x.css, g/a/y.css va g/a/b/z.css dan faqat g/a/y.css tekshirildi, qolgan ikkitasi — jim o'tkazib yuborildi. Tuzatish: namunani qo'shtirnoqqa oling — "g/**/*.css". Shunda uni Stylelint o'zi ochadi va uchala faylni topadi.

Namuna umuman hech narsaga mos kelmasa, Stylelint aniq xabar beradi:

NoFilesFoundError: No files matching the pattern "yoq/**/*.css" were found.

Tarjimasi: "Namunaga mos fayl topilmadi." Papka nomini tekshiring.

7.2 To'plam o'rnatilmagan

.stylelintrc.json da extends bor, lekin to'plam o'rnatilmagan (yoki nomida xato). Stylelint to'xtaydi — masalan, nomi noto'g'ri yozilgan to'plam uchun:

ConfigurationError: Could not find "stylelint-config-yoq". Do you need to install the package or use the "configBasedir" option?

Tarjimasi: "stylelint-config-yoq topilmadi. Paketni o'rnatish kerakmi yoki configBasedir sozlamasini ishlatish kerakmi?" Xabar ostidagi at ... qatorlari — Stylelint'ning ichki yo'li, ularni o'qish shart emas. Tuzatish: npm install --save-dev stylelint-config-standard va nomni tekshiring.

7.3 Qoida — buyruq emas, savol

no-descending-specificity o'nlab xabar berdi va dasturchi ularni "tuzatish" uchun qoidalar tartibini aralashtirib yubordi — kaskad o'zgardi, sahifa buzildi. Tuzatish: har xabarni o'qing. Qoida sizning loyihangizga mos kelmasa, uni sozlamada o'chirish ham to'g'ri qaror. Asosiysi — qaror ongli bo'lsin.

7.4 --fix kerakli narsani o'chirdi

Prefiksli xususiyat, eski brauzer uchun zaxira — --fix ularni "ortiqcha" deb hisoblashi mumkin. Tuzatish: avval o'qing, istisnolarni stylelint-disable-next-line bilan belgilang, keyin --fix. Portfolio qadamida aynan shu holat bor.

8. Mashqlar

Mashqlar kurs/mashqlar/06/stylelint/ da: npm init -y, npm install --save-dev stylelint stylelint-config-standard va .stylelintrc.json.

1-mashq (oson): xabarlarni o'qing

.bron-havola {
  background-color: #2f6b3a;
  color: #fffaf0;
  colour: #fffaf0;
  padding: 8px 16px;
  padding: 8px 16px;
}

Stylelint'ni ishga tushiring. Nechta xato chiqadi? Har birining qoida nomini yozing va tuzating.

Ishora: colour — britancha yozilish (CSS nima darsidagi 3-mashqni eslang).

m1/a.css
  4:3  ✖  Unknown property "colour"     property-no-unknown
  5:3  ✖  Duplicate property "padding"  declaration-block-no-duplicate-properties

✖ 2 problems (2 errors, 0 warnings)
  1 error potentially fixable with the "--fix" option.

.bron-havola {
  background-color: #2f6b3a;
  color: #fffaf0;
  padding: 8px 16px;
}

2-mashq (o'rta): jamoa qoidalari

«Bahor» jamoasi qaror qildi: !important taqiqlanadi, jismoniy margin-*/padding-* tomonlari taqiqlanadi. Shu ikki qoidani .stylelintrc.json ga qo'shing va quyidagi faylni tekshiring. So'ng xatolarni tuzating — [hidden] dagi !important bundan mustasno, uni asoslab qoldiring.

[hidden] {
  display: none !important;
}

.aksiya {
  margin-left: 1rem;
  padding-top: 0.5rem;
  color: #b4461a !important;
}

Ishora: qoida nomlari — declaration-no-important va property-disallowed-list ("Jismoniy xususiyatlar" bo'limi). Mantiqiy juftlar: margin-inline-start, padding-block-start.

{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "declaration-no-important": true,
    "property-disallowed-list": [
      "/^(margin|padding|border)-(top|right|bottom|left)/",
      "/^(top|right|bottom|left)$/"
    ]
  }
}

/* stylelint-disable declaration-no-important -- hidden himoyasi */
[hidden] {
  display: none !important;
}
/* stylelint-enable declaration-no-important */

.aksiya {
  margin-inline-start: 1rem;
  padding-block-start: 0.5rem;
  color: #b4461a;
}

3-mashq (qiyin): --fix nimani qiladi?

Quyidagi fayl uchun avval --fix nimani o'zgartirishini va nimani qoldirishini yozib chiqing, keyin ishga tushirib, taxminingizni tekshiring (standart to'plam bilan):

:root {
  --rang-asosiy: oklch(48.4% 0.097 158.9);
}

h1 {
  font-family: "Bahor", serif;
  text-decoration: underline currentColor;
}

button {
  -webkit-user-select: none;
  user-select: none;
}

Ishora: portfolio xabarlaridagi qoidalar — hue-degree-notation, font-family-name-quotes, value-keyword-case, property-no-vendor-prefix.

:root {
  --rang-asosiy: oklch(48.4% 0.097 158.9deg);
}

h1 {
  font-family: Bahor, serif;
  text-decoration: underline currentcolor;
}

button {
  user-select: none;
  user-select: none;
}

4-mashq: Portfolio qadami — npm run check ga Stylelint

Yakuniy loyiha: portfolio darsidan beri portfolio'ning npm run check i Prettier va html-validate'ni ishlatadi. Unga uchinchi tekshiruvchi — Stylelint qo'shiladi.

1. O'rnating: npm install --save-dev stylelint stylelint-config-standard.
2. .stylelintrc.json — standart to'plam, ustidan to'rtta qaror: !important taqiqlansin, jismoniy tomonlar taqiqlansin (property-disallowed-list va text-align/float uchun declaration-property-value-disallowed-list), no-descending-specificity o'chirilsin.
3. package.json ga lint:css skripti va check ga uning chaqiruvi.
4. npm run lint:css ni ishga tushiring. --fix dan oldin har xabarni o'qing va uch guruhga ajrating: yozuv shakli (--fix ga), asoslangan istisno (izoh bilan), qo'lda tuzatiladigan.
5. Istisnolarni izoh bilan belgilang (sababi bilan — oraliq shaklida), keyin npx stylelint "sayt/**/*.css" --fix, so'ng npm run format va npm run check — 0 xato.

Ishora: CSS metodologiyalari darsidan keyin CSS yettita faylda — namuna "sayt/**/*.css" hammasini oladi. Dizayn tokenlari darsidagi --step--1 nomiga ham e'tibor bering: Stylelint unga nima deydi va nomni o'zgartirish kerakmi?

{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "declaration-no-important": true,
    "no-descending-specificity": null,
    "property-disallowed-list": [
      "/^(margin|padding|border)-(top|right|bottom|left)/",
      "/^(top|right|bottom|left)$/"
    ],
    "declaration-property-value-disallowed-list": {
      "text-align": ["left", "right"],
      "float": ["left", "right"]
    }
  }
}

{
  "scripts": {
    "lint:css": "stylelint \"sayt/**/*.css\""
  }
}

sayt/assets/css/komponentlar.css
  254:1  ✖  Expected selector ".loyihalar ul" to come before selector "nav[aria-label="Asosiy menyu"] ul", at line 53  no-descending-specificity

sayt/assets/css/asos.css
  32:21  ✖  Disallowed !important  declaration-no-important

sayt/assets/css/komponentlar.css
   91:18  ✖  Expected custom property name "--step--1" to be kebab-case      custom-property-pattern
  127:3   ✖  Expected empty line before declaration                          declaration-empty-line-before
  203:1   ✖  Expected empty line before rule                                 rule-empty-line-before
  206:1   ✖  Expected empty line before rule                                 rule-empty-line-before
  272:3   ✖  Expected empty line before declaration                          declaration-empty-line-before
  334:18  ✖  Expected custom property name "--step--1" to be kebab-case      custom-property-pattern
  459:18  ✖  Expected custom property name "--step--1" to be kebab-case      custom-property-pattern
  487:1   ✖  Duplicate selector "[popover], dialog", first used at line 471  no-duplicate-selectors

sayt/assets/css/layout.css
  36:33  ✖  Expected "currentColor" to be "currentcolor"                value-keyword-case
  45:18  ✖  Expected custom property name "--step--1" to be kebab-case  custom-property-pattern

sayt/assets/css/reset.css
  12:17  ✖  Disallowed !important                                declaration-no-important
  17:3   ✖  Vendor-prefixed property "-webkit-text-size-adjust"  property-no-vendor-prefix

sayt/assets/css/tokenlar.css
   6:3   ✖  Expected empty line before custom property                  custom-property-empty-line-before
  26:55  ✖  Expected "Menlo" to be "menlo"                              value-keyword-case
  26:62  ✖  Expected "Consolas" to be "consolas"                        value-keyword-case
  30:3   ✖  Expected custom property name "--step--1" to be kebab-case  custom-property-pattern
  57:5   ✖  Expected empty line before custom property                  custom-property-empty-line-before
  91:16  ✖  Expected no quotes around "Sarlavha"                        font-family-name-quotes

sayt/assets/css/yordamchi.css
  44:9  ✖  Expected "A4" to be "a4"  value-keyword-case

✖ 37 problems (37 errors, 0 warnings)
  29 errors potentially fixable with the "--fix" option.

"custom-property-pattern": [
  "^_?([a-z][a-z0-9]*)(--?[a-z0-9]+)*$",
  { "message": "Nom: kichik harf, raqam, chiziqcha" }
]

/* stylelint-disable declaration-no-important -- hidden himoyasi */
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}
/* stylelint-enable declaration-no-important */

/* iPhone shriftni kattalashtirmasin (Mobil tuzoqlar darsi) */
html {
  /* stylelint-disable property-no-vendor-prefix -- iOS Safari */
  -webkit-text-size-adjust: 100%;
  /* stylelint-enable property-no-vendor-prefix */
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    /* stylelint-disable declaration-no-important -- harakat taqiqi */
    animation: none !important;
    /* stylelint-enable declaration-no-important */
  }
}

[popover],
dialog {
  /* ... ko'rinish qatorlari o'zgarishsiz ... */

  /* Ochilish va yopilish — faqat shaffoflik (harakat emas) */
  opacity: 0;
  transition:
    opacity 0.2s,
    display 0.2s allow-discrete,
    overlay 0.2s allow-discrete;
}

npx stylelint "sayt/**/*.css" --fix
npm run format
npm run check

> portfolio@1.0.0 check
> prettier --check sayt && npm run lint && npm run lint:css

Checking formatting...
All matched files use Prettier code style!

> portfolio@1.0.0 lint
> html-validate "sayt/**/*.html"


> portfolio@1.0.0 lint:css
> stylelint "sayt/**/*.css"

9. Real ishda

• Deyarli har professional frontend loyihada linter bor: JavaScript uchun ESLint (ESLint I), CSS uchun Stylelint. Yangi loyihaga kelganda .stylelintrc.* ni o'qish — jamoa qoidalarini bilishning eng tez yo'li.
• CI — kod GitHub'ga yuborilganda npm run check o'zi ishga tushadi va xato bo'lsa, kodni qabul qilmaydi (HTML kod uslubi darsida aytgan edik). Stylelint shu zanjirning bir halqasi.
• Katta kompaniyalar o'z to'plamlarini chiqaradi: stylelint-config-... paketlari. Siz bugun o'z beshta qaroringiz bilan xuddi shunday ish qildingiz.
• Intervyuda: "Linter va formatter farqi?", "Nega Prettier bor bo'lsa ham Stylelint kerak?", "Qoidani qachon o'chirish mumkin?"

Xulosa

• Prettier — ko'rinish (formatter), Stylelint — ma'no va jamoa qoidalari (linter). Brauzer jim tashlaydigan xatolarni Stylelint ko'rsatadi.
• O'rnatish: stylelint + stylelint-config-standard, sozlama — .stylelintrc.json, ishga tushirish — npx stylelint "**/*.css".
• rules: true — yoqish, null — o'chirish, massiv — sozlash; plaginlar (stylelint-order) va SCSS to'plami qo'shimcha qoidalar beradi.
• --fix dan oldin xabarlarni o'qing; istisno — stylelint-disable-next-line yoki disable/enable oralig'i, qoida nomi va sababi bilan.
• Stylelint 16 dan beri formatlash qoidalari yo'q — Prettier bilan to'qnashuv yo'q; tartib: stylelint --fix, keyin prettier.

Keyingi dars: CSS Modules: komponentga lokal class'lar — class nomlarini avtomatik noyob qilib, komponent stillarini bir-biridan ajratish.

Manbalar

• Stylelint: "Getting started", "Rules", "Configuration", "Ignoring code" — stylelint.io
• stylelint-config-standard — github.com/stylelint/stylelint-config-standard
• stylelint-order — github.com/hudochenkov/stylelint-order
• Stylelint 16 migratsiya qo'llanmasi (formatlash qoidalari olib tashlangani) — stylelint.io/migration-guide/to-16
• Prettier: "Prettier vs. Linters" — prettier.io/docs/comparison