10 הכלים הטובים ביותר לעיצוב ואופטימיזציה של קבצי CSS

עיצוב קבצי CSS ואופטימיזציה הם לא יותר כאב ראש עבור מפתחי אתרים בעזרת כלים אלה שנבחרו בעבודת יד!


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

CSS נקרא גיליון סגנונות מדורגים בגלל אופן היישום של ערכי המאפיינים על היררכיית התוכן. אלמנטים של ילדים יכולים לרשת או לבטל את ערכי המאפיינים מאלמנטים ההורים שלהם. יכולות אלה ניתנות באמצעות מודל המבוסס על היקף השפעה היררכי. הבעיה במודל זה היא שאם לא משתמשים בו נכון, זה יכול להשפיע ברצינות על ביצועי האתר.

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

אופטימיזציה של CSS יכולה להיעשות במובנים רבים: ניתן לצמצם את קבצי CSS בגודל, לנקות אותם, ניתן לבדוק אותם או לאמת אותם לתקינות, ניתן לסדר אותם, ניתן לעצב אותם כדי להבין את הקוד שלה, ובאופן כללי, טוב יותר, ניתן לבצע מכוון לאפשר חווית משתמש טובה יותר. ערכנו מבחר הכלים הטובים ביותר לכל אחת מהמשימות הללו.

# כלי כוונון CSS

CSS צמצם

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

כשאתה מצמצם את הקוד שלך, כדאי לשמור גרסה מיופרת (לא ממוזערת) שלו, מכיוון שתצטרך להיות מסוגל לקרוא אותו בעתיד, למקרה שתצטרך לבצע בו שינויים.

מעיל עליון

מעיל עליון אינו כלי למיטוב ה- CSS שלך. במקום זאת זוהי ספריית CSS עם קוד פתוח המעוצבת תוך התחשבות במהירות. זהו צאצא של שפת העיצוב של אדובי שפותחה עבור Bracket, Edge Reflow.

Topcoat כולל PSD וממצאים רבים אחרים של עיצוב, יחד עם אוסף של אייקונים SVG פשוטים ומנקים ומדריכי סגנון. הוא מציע גם כלי השוואת ביצועים ומשפחת הגופנים המפוארת של Adobe Source Sans Pro.

מטהר קוד

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

הכלי מציע רשימה משמעותית ומקיפה של אפשרויות המאפשרות לך להתאים את תוצאותיו כך שתתאים להעדפותיך. לדוגמה, הוא מספק חמש אפשרויות לדחיסה, החל מדחיסה נמוכה לדחיסה הגבוהה ביותר. אפשרויות אחרות מאפשרות לך לציין מיון, צורות אחרות של דחיסה, הסרת פריטים מיותרים, בין אחרים.

ננו CSS

כלי נוסף למזעור CSS הוא ננו CSS. כלי זה מבוסס על כלי שנוצר לשינוי סגנונות באמצעות JavaScript, שנקרא PostCSS. הודות לארכיטקטורת התוספים של כלי זה, יוצרי CSS Nano הצליחו לבנות אותו מתוך מודולים קטנים עם פונקציות מוגבלות..

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

# כלי ניקוי CSS

סימון מלוכלך

סימון מלוכלך עושה בדיוק את ההפך ממעברים קטנים: הוא לוקח את כל הקוד שאתה מאכיל אותו ומנקה אותו, מה שמקל על הקריאה – כל עוד הוא קוד CSS תקף. הקוד המתקבל יופי בצורה מושלמת.

יוצרי ה- Dirty Markup אומרים שכמעט מיליארד שורות קוד (בהתחשב לא רק ב- CSS אלא גם ב- HTML ו- JavaScript), יופרו באמצעות הכלי שלהם..

בוחרים ב- Dust-Me

בוחרים ב- Dust-Me נוצר כדי לסרוק אתר ולמצוא בוחרי CSS שאינם בשימוש על מנת להסיר אותם ולהקטין את גודל הקוד שלך. זה עובד כתוסף לפיירפוקס ולאופרה.

בוחרים ב- Dust-Me יכולים לעבוד על דף בודד או לסרוק מפת אתר שלמה, ולהציג את הפרטים של כל גיליונות הסגנונות והברקטורים שנמצאו, לארגן אותם בשימוש ולא בשימוש. גרסת פיירפוקס מסוגלת לסרוק דפים באופן אוטומטי בזמן הגלישה. עליך לקחת בחשבון רק שכאשר מבצעים זאת, אירועי מוטציה יכולים לעורר סריקות נוספות אם הדף משתנה.

מוך CSS

מוך CSS מציע ממשק מינימליסטי: סתם תיבת טקסט גדולה בה אתה מדביק את קוד ה- CSS שלך כך שהוא “ימשוך”. זה לא אומר מה יעשה תהליך המוך לקוד שלך, אך הודעת אזהרה בראש העמוד אומרת לך שהתוצאות יפגעו ברגשותיך – וגם יעזרו לך לקוד טוב יותר.

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

# כלי בדיקת / אימות CSS

מבחן מתח CSS

מבחן מתח CSS פועלת כסימניה (חתיכה קטנה של קוד JavaScript) המחילה בדיקות לחץ על CSS של כל דף אינטרנט נתון. הכלי באינדקס של כל האלמנטים בקוד CSS ובכיתות שלהם. ואז זה מתחיל את מבחן המתח על ידי הסרת השיעורים בזה אחר זה ותזמון כמה זמן לוקח לגלול את הדף.

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

אבל CSS3 עלול לגרום לבעיות: מאפיין בודד עלול לגרום לרישום מחדש לעין ולבעיות גלילת העמודים. זה המקום בו מבחן הלחץ של CSS יכול להועיל.

שירות אימות CSS

שירות אימות CSS מאמת גיליונות סגנונות מדורגים ו- (X) HTML עם גיליונות סגנונות. הכלי בודק אם יש מאפיינים המוגדרים בכל גרסאות CSS. כדי לאמת דף או קובץ CSS, אתה רק צריך להזין את ה- URI שלו (מזהה משאב אחיד) ולהגדיר כמה אפשרויות בסיסיות, כמו פרופיל (סוג CSS שיש לבדוק), מכשיר יעד, אזהרות להראות ומה לעשות עם תוספי ספק. בעיות קשורות (הצג שגיאות או אזהרות).

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

BackstopJS 3

BackstopJS 3 מבצעת אוטומציה של בדיקת רגרסיה חזותית של ממשקי משתמש רספונסיביים. זה עושה את שלו על ידי השוואה בין סדרת צילומי מסך של DOM. היא מציעה רשימת תכונות מרגשת: יש דיווח בדפדפן, גם הגדרת פריסה להדפסה ומסך, וכמה תכונות ספציפיות אחרות, כמו סינון תצוגה ובודק הפניה / מבחן / מבחן diff..

באמצעות סקריפט של Puppeteer ו- ChromyJS, BackstopJS 3 יכול לדמות אינטראקציות משתמשים, והוא מסוגל לבצע בדיקות עם Chrome ללא Head. על מנת להיפטר מבעיות טיוח חוצה פלטפורמות, יש לו גם עיבוד דוקר משולב. הכלי יכול לרוץ באופן גלובלי או מקומי כחבילה עצמאית, והוא משחק יפה עם CI ובקרת מקור. BackstopJS 3 קל מאוד לשימוש: עם שלוש פקודות בלבד, אתה יכול לעשות דרך ארוכה למדי.

סיכום

אני מקווה שכלי ה- CSS לעיל יעזרו לך למטב את קבצי ה- CSS של יישום האינטרנט שלך לביצועים טובים יותר. אם אתה מעוניין ללמוד CSS מתקדם, בדוק זאת כמובן מבריק.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map