מוסכמות למתן שמות CSS שיחסכו לכם שעות של ניפוי באגים

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

קוריאני ??

알림: 한국인 독자 분들 을 위해 본 기사 는 로 번역 되었으며, 한국어 버전 은 여기 에서 보실 수 있습니다

CSS אינה 'השפה' היפה ביותר, אך היא מפעילה את עיצוב האינטרנט בהצלחה כבר למעלה מ -20 שנה. לא מסתדר רע מדי, הא?

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

קשה מאוד לשמור על CSS.

CSS כתוב גרוע יהפוך במהירות לסיוט.

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

השתמש במיתרי מקף מופרדים

אם אתה כותב הרבה JavaScript, אזי כתיבת משתנים במקרה של גמלים היא מקובל.

var redBox = document.getElementById('...')

נהדר, נכון?

הבעיה היא שצורת שמות זו אינה מתאימה היטב ל- CSS.

אל תעשה את זה:

.redBox { border: 1px solid red;}

במקום זאת, בצע זאת:

.red-box { border: 1px solid red;}

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

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

// Correct

.some-class { font-weight: 10em}

// Wrong

.some-class { fontWeight: 10em}

אמנת שמות BEM

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

באופן כללי, ישנן שלוש בעיות שמוסכמות שמות CSS מנסות לפתור:

1. לדעת מה עושה בורר רק על ידי הסתכלות בשמו
2. לקבל מושג היכן ניתן להשתמש בבורר, רק על ידי התבוננות בו
3. לדעת את היחסים בין שמות כיתות, רק על ידי התבוננות בהם

האם ראית אי פעם שמות כיתות כתובים כך:

.nav--secondary { ...}

.nav__header { ...}

זו אמנת השמות של BEM.

הסבר על BEM לילד בן 5

BEM מנסה לחלק את ממשק המשתמש הכולל לרכיבים לשימוש חוזר קטן.

שקול את התמונה למטה:

לא, זה לא זוכה בפרסים :(

הסטיק-מן מייצג מרכיב, כמו גוש עיצוב.

אולי כבר ניחשתם שה- B ב- BEM מייצג 'חסום'.

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

בהתאם לתרגול שהוסבר לעיל, יהיה שם כיתה אידיאלי עבור רכיב זה stick-man.

הרכיב צריך להיות מעוצב כך:

.stick-man { }

השתמשנו כאן בחוטים תחומים. טוֹב!

E לאלמנטים

ה- E ב- 'BEM' מייצג אלמנטים.

בלוקים כלליים של עיצוב לעיתים רחוקות חיים בבידוד.

למשל, לאיש המקל יש headשני arms, מדהימים ו feet.

head, feet, ו armsהם כל האלמנטים בתוך הרכיב. ניתן לראות בהם מרכיבים של ילדים, כלומר ילדים של מרכיב ההורה הכולל.

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

לדוגמה:

.stick-man__head {

}

.stick-man__arms {

}

.stick-man__feet {

}

M לשינויים

ה- M ב- 'BEM' מייצג Modifiers.

מה אם איש המקל היה שונה ונוכל להיות איש blueאו redמקל איש?

בעולם האמיתי זה יכול להיות redכפתור או blueכפתור. אלה שינויים ברכיב המדובר.

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

לדוגמה:

.stick-man--blue {

}

.stick-man--red {

}

הדוגמה האחרונה הראתה את רכיב ההורה המשתנה. זה לא תמיד המקרה.

מה אם היו לנו אנשי מקל headבגדלים שונים ?

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

.stick-manמייצג את Block, .stick-man__headהאלמנט.

כפי שנראה בדוגמה לעיל, ניתן להשתמש במקפים כפולים גם כך:

.stick-man__head--small {

}

.stick-man__head--big {

}

שוב, שימו לב לשימוש במקפים הכפולים בדוגמה לעיל. זה משמש לציון משנה.

עכשיו יש לך את זה.

כך בעצם פועלת אמנת השמות של BEM.

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

אתה יכול לקרוא עוד על BEM.

BEM - Modifier Block Element

BEM - Block Element Modifier הוא מתודולוגיה המסייעת לך להשיג רכיבים לשימוש חוזר ושיתוף קוד ב- ... getbem.com

מדוע להשתמש במוסכמות למתן שמות?

יש רק שתי בעיות קשות במדעי המחשב: פסול מטמון ושמות דברים - פיל קרלטון

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

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

אם תבחר להשתמש במוסכמת שמות BEM, יהיה קל יותר לראות את הקשר בין רכיבי העיצוב / חסימות שלך רק על ידי הסתכלות על הסימון.

מרגיש בטוח?

שמות CSS עם הווי JavaScript

היום הוא היום הראשון של ג'ון בעבודה.

הוא מוסר HTMLקוד שנראה כך:

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

נראה טוב, הא?

לא ידוע לג'ון, הוא שבר את בסיס הקוד ???

אֵיך?

אי שם בקוד JavaScript, היה קשר עם שם הכיתה הקודם siteNavigation:

//the Javasript code

const nav = document.querySelector('.siteNavigation')

לכן, עם שינוי שם הכיתה, navהמשתנה הפך null.

כמה עצוב.

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

1. השתמש בשמות js- מחלקה

אחת הדרכים למתן באגים כאלה היא להשתמש ב- js-*שם כיתה לציון קשר עם אלמנט ה- DOM המדובר.

לדוגמה:

ובקוד JavaScript:

//the Javasript code

const nav = document.querySelector('.js-site-navigation')

כמוסכמה, כל מי שרואה את js-site-navigationשם הכיתה יבין שיש קשר עם אותו רכיב DOM בקוד JavaScript.

2. השתמש בתכונה Rel

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

האם אתה מזהה זאת?

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

בדוגמה הקודמת עם ג'ון, התומכים בטכניקה זו יעשו זאת:

וב- JavaScript:

const nav = document.querySelector("[rel='js-site-navigation']")

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

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

3. אל תשתמש בתכונות נתונים

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

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

טיפ בונוס: כתוב עוד הערות CSS

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

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

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

זה לא כואב.

בדוק עד כמה קוד המקור של Bootstrap הגיב היטב.

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

מוכנים להיות מקצוענים?

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