CSS נקי ללא בדיקה ידנית: הטמעת Stylelint

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-standard-scss"
  ],
  "plugins": ["stylelint-order"],
  "rules": {
    "color-named": "never",
    "color-no-invalid-hex": true,
    "unit-no-unknown": true,
    "property-no-unknown": true,
    "declaration-block-no-duplicate-properties": true,
    "no-duplicate-selectors": true,
    "selector-class-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$",
    "order/properties-order": [
      "content",
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "display",
      "flex",
      "flex-direction",
      "flex-wrap",
      "align-items",
      "justify-content",
      "grid",
      "grid-template",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "border",
      "border-radius",
      "background",
      "background-color",
      "color",
      "font",
      "font-size",
      "font-weight",
      "line-height",
      "transition",
      "animation",
      "cursor",
      "pointer-events",
      "opacity",
      "overflow",
      "visibility"
    ]
  }
}

אנו מגדירים סדר מאפיינים שיתאים למדריך הסגנון שלך. ניתן לפשט לקבוצות ללא סדר קפדני בתוך הקבוצות. להגדרה אנו משתמשים בתוסף npm install --save-dev stylelint stylelint-config-standard stylelint-config-standard-scss stylelint-order npm install --save-dev @stylelint/postcss-css-in-js postcss-syntax : בכלל { "extends": [ "stylelint-config-standard", "stylelint-config-standard-scss" ], "plugins": ["stylelint-order"], "rules": { "color-named": "never", "color-no-invalid-hex": true, "unit-no-unknown": true, "property-no-unknown": true, "declaration-block-no-duplicate-properties": true, "no-duplicate-selectors": true, "selector-class-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$", "order/properties-order": [ "content", "position", "top", "right", "bottom", "left", "z-index", "display", "flex", "flex-direction", "flex-wrap", "align-items", "justify-content", "grid", "grid-template", "width", "min-width", "max-width", "height", "min-height", "max-height", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "border", "border-radius", "background", "background-color", "color", "font", "font-size", "font-weight", "line-height", "transition", "animation", "cursor", "pointer-events", "opacity", "overflow", "visibility" ] } } ניתן להגדיר סדר מדויק או קיבוץ.

Tailwind CSS

עבור Tailwind אנו מבטלים בדיקות לכללי at-rules:

{
  "extends": ["stylelint-config-standard", "stylelint-config-tailwindcss"],
  "rules": {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen", "layer"]
      }
    ]
  }
}

CSS-in-JS (styled-components, emotion)

{
  "overrides": [
    {
      "files": ["**/*.{js,jsx,ts,tsx}"],
      "customSyntax": "@stylelint/postcss-css-in-js",
      "rules": {
        "color-named": "never",
        "property-no-unknown": true
      }
    }
  ]
}

ניתן לקרוא עוד על CSS-in-JS בוויקיפדיה.

שילוב בעורך

התקן את התוסף stylelint-order והגדר את settings.json, תוך ביטול הלינטר המובנה של VS Code עבור CSS/SCSS. אפשר תיקון אוטומטי בשמירה.

איך Stylelint מאיץ את בדיקת הקוד?

השוואה: ללא לינטר, מפתח מבזבז 10-15 דקות בבדיקת סגנונות ב-pull request. Stylelint תופס 95% מהבעיות אוטומטית; רק שאלות ארכיטקטוניות נשארות לבדיקת הקוד. לפי המדידות שלנו, צוות של 5 חוסך עד 80% מהזמן בבדיקות CSS. עם תעריף ממוצע של $50 לשעה, זה חוסך כ-$6000 בחודש. יתרה מכך, עלות תיקון שגיאת CSS אחת לאחר שחרור יכולה להגיע ל-$200, ו-Stylelint מונע עלויות כאלה.

Stylelint מוצא שגיאות פי 5 מהר יותר מבדיקה ידנית: PR ממוצע נבדק ב-2 דקות במקום 15. חיסכון בזמן בדיקת קוד עד 80%. אנו מבטיחים שאחרי ההגדרה שלנו, מספר שגיאות ה-CSS ירד ב-90%. קבלו ייעוץ להגדרת Stylelint לפרויקט שלכם.

טעויות נפוצות בהגדרת Stylelint

• קונפליקט עם Prettier: אם לא מבטלים כללים מיותרים, הם מתחילים לסתור זה את זה. השתמשו ב-order/properties-order.
• התעלמות מפרה-מעבדים: עבור SCSS צריך את התצורה { "extends": ["stylelint-config-standard", "stylelint-config-tailwindcss"], "rules": { "at-rule-no-unknown": [true, { "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen", "layer"] }] } } , אחרת הלינטר לא יבין קינון.
• חוסר ב-pre-commit hook: ללא husky ו-lint-staged, הלינטר רץ רק ידנית או ב-CI—הערך יורד.

מה כלול בהגדרת Stylelint?

• קובץ תצורה { "overrides": [ { "files": ["**/*.{js,jsx,ts,tsx}"], "customSyntax": "@stylelint/postcss-css-in-js", "rules": { "color-named": "never", "property-no-unknown": true } } ] } עם כללים מותאמים
• שילוב עם Prettier (אם נדרש)
• Pre-commit hook (husky + lint-staged)
• סקריפטים ל-CI (פקודה stylelint.vscode-stylelint ב-pipeline)
• תיעוד כללים וחריגים
• הדרכת צוות (הדגמה של 30 דקות)

תהליך

1. ניתוח — לימוד הקוד הנוכחי, פרה-מעבדים, מדריך סגנון, מסגרות (Tailwind? CSS-in-JS?).
2. בחירת תצורה — סטנדרטית, scss, tailwindcss, css-modules — או שילוב.
3. הגדרת כללים — התאמה למוסכמות השמות שלך, סדר מאפיינים, מאפייני פרויקט.
4. שילוב — הוספה ל-bundler (webpack/vite), pre-commit hook (husky), CI (GitHub Actions/GitLab CI).
5. בדיקה — הרצת לינטר על כל הפרויקט, תיקון שגיאות ראשוניות, תיעוד.
6. תיעוד — מסירת תצורה, הוראות למפתחים, המלצות לשיפור.

לוחות זמנים משוערים

סה"כ: מיום עבודה אחד עד יומיים תלוי במורכבות. צרו קשר—נעריך את הקוד שלכם ונכין תצורה מוכנה.