שימוש בשכבות CSS Cascade לניהול סגנונות מותאמים אישית בפרויקט רוח גבית PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.

שימוש בשכבות CSS Cascade לניהול סגנונות מותאמים אישית בפרויקט של רוח גב

חותמת זמן: 24 באוגוסט, 2022 9:11

אם מחלקת שירות עושה רק דבר אחד, רוב הסיכויים שאתה לא רוצה שהוא יעקוף על ידי סגנונות כלשהם שמגיעים ממקום אחר. גישה אחת היא להשתמש !important כדי להיות בטוח ב-100% שהסגנון יוחל, ללא קשר להתנגשויות ספציפיות.

לקובץ התצורה של Tailwind יש !important אפשרות שתוסיף אוטומטית !important לכל מחלקת שירות. אין שום דבר רע בשימוש !important בדרך זו, אבל בימינו יש דרכים טובות יותר להתמודד עם ספציפיות. באמצעות שכבות CSS Cascade אנו יכולים להימנע מהגישה הכבדה של שימוש !important.

שכבות אשד מאפשרות לנו לקבץ סגנונות ל"שכבות". העדיפות של שכבה תמיד מנצחת את הספציפיות של בורר. הספציפיות חשובה רק בתוך כל שכבה. קביעת סדר שכבות הגיוני עוזר להימנע מעימותי סטיילינג ומלחמות ספציפיות. זה מה שהופך את שכבות CSS Cascade לכלי נהדר עבורו ניהול סגנונות מותאמים אישית לצד סגנונות ממסגרות של צד שלישי, כמו Tailwind.

מקור רוח גב .css הקובץ מתחיל בדרך כלל משהו כזה:

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

בואו נסתכל על מסמכים רשמיים של Tailwind לגבי הנחיות:

הנחיות הן כללים מותאמים אישית ספציפיים ל-Tailwind שתוכלו להשתמש בהם ב-CSS שלכם המציעים פונקציונליות מיוחדת עבור פרויקטים של Tailwind CSS. להשתמש ב @tailwind הנחיה להכנסת Tailwind's base, components, utilities ו variants סגנונות לתוך ה-CSS שלך.

בקובץ CSS הפלט שנבנה, איפוס ה-CSS של Tailwind - המכונה טיסה מקדימה - נכלל תחילה כחלק מסגנונות הבסיס. שאר ה base מורכב ממשתני CSS הדרושים ל-Tailwind לעבוד. components הוא מקום עבורך להוסיף שיעורים מותאמים אישית משלך. כל מחלקות השירות שהשתמשת בהן בסימון שלך יופיעו בשלב הבא. וריאנטים הם סגנונות לדברים כמו מצבי ריחוף ומיקוד וסגנונות תגובה, שיופיעו אחרונים בקובץ ה-CSS שנוצר.

רוח הגב @layer הוראה

באופן מבלבל, ל-Tailwind יש משלה @layer תחביר. מאמר זה עוסק בתקן ה-CSS, אבל בואו נסתכל במהירות על גרסת Tailwind (שנעשה קומפילציה ואינה מגיעה ל-CSS הפלט). רוח הגב @layer directive היא דרך להחדיר סגנונות נוספים משלך לחלק מוגדר של קובץ הפלט CSS.

לדוגמה, כדי לצרף סגנונות משלך ל- base סגנונות, תעשה את הפעולות הבאות:

@layer base {
  h1 {
    font-size: 30px;
  }
}

השמיים components שכבה ריקה כברירת מחדל - זה רק מקום להציב שיעורים משלך. אם היית עושה דברים בדרך Tailwind, כנראה שהיית משתמש @apply (אם כי היוצר של Tailwind לאחרונה המליצו נגד זה), אבל אתה יכול גם לכתוב שיעורים בדרך הרגילה:

@layer components {
  .btn-blue {
    background-color: blue;
    color: white;
  }
}

תקן ה-CSS הרבה יותר חזק. בוא נחזור לזה…

שימוש בתקן CSS @layer

הנה איך נוכל לשכתב את זה כדי להשתמש בתקן CSS @layer:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
}

בניגוד להנחיית Tailwind, אלה לא מתאספים משם. הם מובנים לדפדפן. למעשה, DevTools ב-Edge, Chrome, Safari ו-Firefox אפילו יראו לך את כל השכבות שהגדרת.

שימוש בשכבות CSS Cascade לניהול סגנונות מותאמים אישית בפרויקט של רוח גב

אתה יכול לקבל כמה שכבות שאתה רוצה - ותן להם שם איך שאתה רוצה - אבל בדוגמה זו, כל הסגנונות המותאמים אישית שלי נמצאים בשכבה אחת (my-custom-styles). השורה הראשונה קובעת את סדר השכבות:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

זה צריך להינתן מראש. הקפד לכלול שורה זו לפני כל קוד אחר המשתמש @layer. השכבה הראשונה ברשימה תהיה הכי פחות רב עוצמה, והשכבה האחרונה ברשימה תהיה רוב חָזָק. זה אומר tailwind-base האם ה הכי פחות חזק שכבה וכל קוד בה יעקפו על ידי כל השכבות הבאות. זה גם אומר tailwind-utilities תמיד ינצח כל סגנון אחר - ללא קשר לסדר המקור או הספציפיות. (כלי עזר וגרסאות יכול לכו בשכבות נפרדות, אבל המתחזקים של Tailwind יבטיחו שווריאציות תמיד ינצחו את כלי השירות, כל עוד תכלול את הגרסאות מתחת להנחיית השירותים.)

כל דבר שלא נמצא בשכבה יעקוף כל דבר שנמצא בשכבה (עם החריג היחיד הוא סגנונות המשתמשים !important). אז, אתה יכול גם לבחור לעזוב utilities ו variants מחוץ לכל שכבה:

@layer tailwind-base, tailwind-components, my-custom-styles;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

מה זה בעצם קנה לנו? יש הרבה פעמים שבהם בוררי CSS מתקדמים באים לידי שימוש. בואו ניצור גרסה של :focus-within שמגיב רק למיקוד המקלדת ולא ללחיצות עכבר באמצעות ה :has בוחר (שנוחת בכרום 105). זה יעצב אלמנט הורה כאשר מישהו מהילדים שלו יקבל מיקוד. Tailwind 3.1 הוצג גרסאות מותאמות אישית - למשל <div class="[&:has(:focus-visible)]:outline-red-600"> - אבל לפעמים קל יותר לכתוב CSS:

@layer tailwind-base, my-custom-styles;
@layer tailwind-base {
  @tailwind base;
}

@tailwind utilities;

@layer my-custom-styles {
  .radio-container {
    padding: 4px 24px;
    border: solid 2px rgb(230, 230, 230);
  }
  .radio-container:has(:focus-visible) {
    outline: solid 2px blue;
  }
}

נניח שבמקרה אחד בלבד אנו רוצים לעקוף את outline-color החל מ- blue למשהו אחר. נניח שהאלמנט שאנחנו עובדים איתו כולל את שני המעמד Tailwind .outline-red-600 ושלנו .radio-container:has(:focus-visible) מעמד:

<div class="outline-red-600 radio-container"> ... </div>

איזה outline-color ינצח?

בדרך כלל, הספציפיות הגבוהה יותר של .radio-container:has(:focus-visible) זה אומר שלמחלקת Tailwind אין השפעה - גם אם היא נמוכה יותר בסדר המקור. אבל, בניגוד לרוח גב @layer הנחיה המסתמכת על סדר המקור, תקן ה-CSS @layer מבטל את הספציפיות.

כתוצאה מכך, אנו יכולים להשתמש בבוררים מורכבים בסגנונות המותאמים אישית שלנו, אך עדיין לעקוף אותם עם מחלקות השירות של Tailwind כאשר אנו צריכים - מבלי להזדקק למאמץ כבד. !important שימוש כדי להשיג את מה שאנחנו רוצים.

בול זמן:

עוד מ טריקים של CSS