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

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

1. השתמש בשמות סמנטיים

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

למשל, במקום להשתמש בשמות מסורתיים כמו קופסא אוֹ מַחְזִיק, נסה להשתמש בשמות כמו כּוֹתֶרֶת אוֹ סרגל צד המשקפים את התפקיד הספציפי של הרכיב.

/* דוגמה לשמות סמנטיים */
.כּוֹתֶרֶת {}
סרגל צד {}

2. השתמש באמנות שמות עקביות

עקביות היא המפתח בעת מתן שמות למחלקות ומזהות CSS. שימוש באותו תקן שמות על פני הלוח מקל על השמירה על המבנה של בסיס הקוד.

מוסכמות השמות BEM (Block Element Modifier) ​​ו- OOCSS (Object-Oriented CSS) הן מוסכמות השמות המועדפות ביותר.

אתה יכול להשתמש במוסכמות השמות של OOCSS כדי לכתוב קוד CSS שהוא מודולרי, ניתן לניהול וניתן להרחבה. הנה המחשה של איך אתה יכול

instagram viewer
ליצור תפריט ניווט באמצעות OOCSS:

/* מבנה */
.nav {
לְהַצִיג: לְהַגמִישׁ;
בסגנון רשימה: אף אחד;
}


‎.nav__item {
שוליים-ימין: 1rem;
}


.nav__link {
טקסט-קישוט: אף אחד;
צֶבַע: #333;
}


/* מראה חיצוני */


.nav__link:לְרַחֵף {
טקסט-קישוט: לָשִׂים דָגֵשׁ;
}

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

3. הימנע ממרחבי שמות

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

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

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

זה מוביל לנפיחות בקוד CSS, שזה מבלבל ומאתגר לתחזק לאורך זמן.

קח, למשל:

/* עם מרחב שמות */
.my-module.תוֹכֶן {
צבע רקע: כְּחוֹל;
}


/* ללא מרחב שמות */


.module-header {
צבע רקע: אָדוֹם;
}


.module-content {
צבע רקע: צהוב;
}

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

בחלק השני, מרחב השמות מוחלף בשמות מחלקות תיאוריים .module-header ו .module-content. בנוסף להפוך את הקוד לקל יותר להבנה, זה גם הופך אותו לפשוט יותר לתחזוקה.

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

השתמש בשמות מחלקות תיאוריים, למשל:

.כּוֹתֶרֶת {
צבע רקע: אָדוֹם;


}


.תוֹכֶן {


צבע רקע: צהוב;
}

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

4. הימנע משמות גלובליים

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

שקול את הדוגמה שלהלן:

 שימוש לא נכון בשמות גלובליים 
<divמעמד="מְכוֹלָה">
<divמעמד="סרגל צד">


 תוכן כאן 
div>
div>

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

עדיף להשתמש בשמות מדויקים יותר בהיקף של הרכיב או המודול הרלוונטי כדי למזער את הבעיות הללו.

תראה גרסה משופרת.

 משופר עם שמות ספציפיים 
<divמעמד="כותרת__מיכל">
<divמעמד="סרגל צד_תוכן">


 תוכן כאן 
div>
div>

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

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

5. השתמש באמנת השמות של BEM

מוסכמות השמות BEM (Block Element Modifier) ​​פופולרית למתן שמות למחלקות ומזהות CSS בפרויקטים של JavaScript. BEM מספקת דרך מובנית ומודולרית לתת שמות לאלמנטים, מעודדת שימוש חוזר ומקלה על תחזוקת בסיסי קוד.

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

הנה דוגמה המשתמשת במוסכמות השמות של BEM:

/* דוגמה של אמנת שמות BEM */
/* חסום */
.כּוֹתֶרֶת {} 


/* אלמנט הבלוק */
‎.header__logo {} 
.header__menu {}
/* משנה של האלמנט */
.header__menu--active {}

האיור לעיל מציג את א כּוֹתֶרֶת לחסום עם א סֵמֶל וכן א תַפרִיט אֵלֵמֶנט. ה תַפרִיט פריט מקבל את פָּעִיל לשנות כדי להראות שהוא הפך לפעיל.

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

6. השתמש בקידומות או סיומות

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

 HTML עם קידומת JavaScript 
<לַחְצָןמעמד="js-toggle">לְמַתֵגלַחְצָן>
<divתְעוּדַת זֶהוּת="js-modal">מוֹדָלִיdiv>

7. השתמש בשמות תיאוריים

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

שקול את הדוגמה שלהלן:

/* שמות לא תיאוריים */
.קופסא כחולה {
/* סגנונות כאן */
}
א {
/* סגנונות כאן */
}

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

השתמש בשמות תיאוריים המסבירים במדויק את תפקידו של האלמנט לשפר את הקריאה והתחזוקה של הקוד.

שקול את הדוגמה המשופרת שלהלן:

/* שמות תיאוריים */
כרטיס מוצר {
/* סגנונות כאן */
}
‎.navigation-link {
/* סגנונות כאן */
}

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

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

8. השתמש בשמות קצרים ותמציתיים

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

שקול את המקרה שבו אתה רוצה להשתמש ב-CSS כדי להתאים אישית תפריט ניווט באתר שלך. אתה יכול להשתמש בשמות קצרים וספציפיים יותר כמו nav-item אוֹ קישור nav במקום ארוכים כמו ממשק nav אוֹ ראשי-ניווט-קישור.

.nav-item {
/* סגנונות לפריטי תפריט ניווט */
}
‎.nav-link {
/* סגנונות לקישורי ניווט */
}

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

שיטות עבודה מומלצות למתן שמות לכיתות ומזהות CSS

בפרויקט JavaScript, חיוני לתת שם כראוי למחלקות ומזהות CSS לקריאות קוד, תחזוקה ומדרגיות.

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