על קוד CSS מיותר ואיך להימנע ממנו
בפרויקטים רבים עלול להיווצר המון קוד CSS מיותר, וחבל, כי הדבר גם עלול להגדיל את זמן הטעינה של האתר וגם עלול לסרבל את תהליכי הפיתוח. אז כיצד אפשר להימנע מזה? בפוסט הבא.
באילו פרויקטים הבעיה נפוצה יותר?
אם אתם תוהים איך ומתי מצטבר כל כך הרבה קוד CSS מיותר, אז הדבר יכול לקרות בגלל מגוון רחב של סיבות:
שימוש בתוספים וספריות חיצוניות
חשוב להבין שספריות מכילות המון קוד, אמנם קוד מעולה שמאוד מקל עלינו בתהליך הפיתוח, אבל לעיתים אנו משתמשים רק בחלק קטן מאוד ממנו ובכך נטען המון קוד CSS שהאתר שלנו לא באמת משתמש בו.
קוד לא יעיל
מפתחים רבים כותבים המון CSS במהלך פיתוח האתר ולא שמים לב לכפילויות שאפשר לצמצם כגון: שימוש ב-id במקום ב-class, כפילות קוד ב-media query ועוד.
בנוסף, במידה ואתם משתמשים ב-SASS או SCSS, וודאו שאתם לא כותבים כללים שיצרו קוד מיותר בתהליך הקומפילציה.
פיתוח ללא תיעוד
במידה והפרויקט שלכם כתוב ללא תיעוד מסודר וללא ניהול גרסאות, קשה מאוד לעקוב אחר קוד שכבר לא בשימוש, פיצ'רים שלמים שהוסרו מהאתר ועוד. במצב כזה, עלול להישאר באתר המון קוד CSS מיותר שנטען לחינם ואף אלמנט לא באמת משתמש בו. חבל.
אז איך בודקים איזה קוד CSS מיותר? הכירו את PurgeCSS
כמובן שהדרך הטובה ביותר למנוע CSS מיותר היא לא ליצור אותו מלכתחילה, לכן, השתדלו לעבוד באופן מסודר, במעקב אחר הפיצ'רים הקיימים באתר שלכם ובאמצעות מערכת ניהול גרסאות כמו גיט. אבל מה אפשר לעשות אם אנחנו חוששים שבפרויקט שלנו יש CSS מיותר? זה הזמן להכיר את PurgeCSS.
PurgeCSS הוא כלי (חבילת npm) מדהים שמאפשר להריץ פקודה אשר רצה על קבצי האתר שנגיד לה, תזהה את פקודות ה-CSS המיותרות ואם נרצה, אפילו תיצור קובץ CSS חדש.
ניתן להשתמש ב-PurgeCSS במספר דרכים, דרך CLI, PostCSS, Webpack, Grunt ועוד.
בפוסט זה אשתמש ב-CLI.
ראשית, נתקין את PurgeCSS באופן גלובלי (יש לדאוג ל-npm כמובן: מדריך מקיף ומפורט על npm).
npm i -g purgecssלצורך הדוגמה, יש לי תיקייה אשר מכילה קובץ אחד ו-2 תיקיות (תיקיית build ריקה):
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="welcome">
<h1>Welcome</h1>
</div>
<footer>
<p>Footer</p>
</footer>
</div>
</body>
</html>קובץ style.css בתיקיית assets:
.container {
width:90%;
margin: 0 auto;
}
.welcome h1 {
font-size: 2rem;
color: #1c1cb2;
}
.mainContent p {
font-size: 1.3rem;
color: #000;
}
footer {
margin-top: 2rem;
}
footer p {
font-size: 1rem;
color: #a0a0a1;
}בדוגמה הפשוטה הזו אפשר להבחין בקלות שה-CSS של mainContent מיותר לגמרי כי הוא לא קיים באמת ב-HTML שלנו.
כעת נריץ את הפקודה הפשוטה הבאה:
purgecss --css assets/*.css --content index.htmlפקודה זה אמרה ל-PurgeCSS לבדוק אילו פקודות CSS שנמצאות בכל קבצי ה-CSS שבתיקיית assets אכן נמצאות בשימוש על ידי הקובץ index.html.
פקודה זו תפלוט את ה-CSS שכן נעשה בו שימוש ותשמיט את ה-CSS המיותר:
במידה ונרצה ש-PurgeCSS ייצור עבורנו קובץ CSS חדש ללא ה-CSS המיותר, שימוש ב-output עם ציון שם תיקיית היעד יעשה זאת:
purgecss --css assets/*.css --content index.html --output build/
ניתן לראות שנוצר קובץ בשם style.css בתיקיית build והוא לא מכיל את ה-CSS המיותר, של התגית mainContent כמובן:
שימוש ב-safelist
אם אתם בכל זאת רוצים לשמור על class מסוים שאין בו שימוש, תוכלו לשמור עליו באמצעות השימוש ב-safelist ובכך PurgeCSS יתעלם ממנו:
purgecss --css assets/*.css --content index.html --safelist myClassName --output build/אהבתם? תוכלו להמשיך לקרוא על PurgeCSS ואופן השימוש בו כאן.
זהירות!
תהליכים אשר נועדו לייעל משאבים באתר הם תהליכים חשובים מאוד אבל ללא בדיקה ובקרה מספקת עלולה להתקבל תוצאה הפוכה – שיבוש האתר. מומלץ מאוד לבצע תהליך שכזה קודם כל בסביבת פיתוח על מנת שיהיה אפשר לוודא שהתהליך לא פגע באתר.
בהצלחה!
נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!
רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)