הבנת מתודולוגיות כתיבת CSS

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

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

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

מתודולוגיית CSS

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

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

אנחנו נסתכל על המתודולוגיות המתגבשות, שיכללו:

1. OOCSS (CSS מונחה עצמים)
2. BEM (בלוק, אלמנט, משנה)
3. ACSS (Atomic CSS)
4. SMACSS (ארכיטקטורת Scalable ומודולרי עבור CSS)

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

1. OOCSS

פותח על ידי ניקול סאליבן בשנת 2008, את המושגים המרכזיים של OOCSS (Object Oriented CSS) כולל CSS אובייקט זיהוי, הפרדת מבנה וסגנונות חזותיים, והימנעות מסגנונות מבוססי מיקום.

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

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

לדוגמה, מבנה זה מאתר זה. הנה משהו שהוא דפוס חזותי חוזר ויש לו HTML עצמאי ו / או CSS:

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

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

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

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

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

היתרונות של OOCSS: קודי עיצוב חזותיים הניתנים לשימוש חוזר, מיקום קודים גמישים, הפחתת בוררים מקוננים עמוקים.

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

2. BEM

פותח על ידי מפתחים ב Yandex בשנת 2009, את המושגים המרכזיים עבור BEM (בלוק, אלמנט, משנה) מקיפה זיהוי בלוק, אלמנט & שינוי ואת שמות אותם בהתאם.

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

לאחר שתזהה את הרכיבים, תן להם שם בהתאם. לדוגמה:

• בלוק תפריט יהיה בכיתה בתפריט
• הפריטים שלה יהיה בכיתה תפריט (בלוק ואלמנט מופרדים על ידי קו תחתון כפול)
• התכונה עבור מצב מושבת בתפריט יכולה להכיל את הכיתה menu_disabled (תוחלת מופרדת על ידי קו תחתון אחד)
• משנה עבור מצב מושבת של פריט בתפריט יכול להיות menu__item_disabled.

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

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

האתר של BEM גם מפרט איך הבלוק, אלמנט ו הפרדה משנה יכול גם להיות מובא לתוך מערכת הקבצים CSS. כמו בלוקים “כפתורים” ו “תשומות” יכול להיות תיקיות משלהם המכילים את הקבצים (.css, .js) המשויכים לאותם בלוקים, מה שהופך את הדברים לקלים יותר כאשר אנו רוצים לייבא את הגושים האלה בפרויקטים אחרים.

היתרונות של BEM:קל לשימוש בכיתה שמות הפחתת בוררי CSS עמוק.

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

3. ACSS

מפורסם על ידי יאהו, איפשהו ליד סוף הראשון עשור של 21^רחוב המאה, מושגי המפתח של ACSS מורכבים ביצירת שיעורים ברמה האטומית ביותר של סטיילינג כלומר, ערך של ערך הנכס, ולאחר מכן להשתמש בהם ב- HTML לפי הצורך.

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

להלן דוגמה של שיעורים המבוססים על ACSS וכיצד הם משמשים ב- HTML.

 .mr-8 margin-right: 8px;. fl-r float: right; 
 

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

היתרונות של ACSS:עיצוב HTML מבלי לעזוב HTML.

חסרונות של ACSS:יותר מדי שיעורים, לא מסודר מאוד ואתה יכול לשנוא את זה.

4. SMACSS

פותח בשנת 2011 על ידי ג 'ונתן Snook SMACSS (ארכיטקטורה להרחבה מודולרי עבור CSS) עובד על ידי זיהוי 5 סוגים שונים של כללי סגנון. שמות מחלקה ומערכת תיוק נוצרים על בסיס אלה.

“SMACSS היא דרך לבחון את תהליך העיצוב שלך כדרך להתאים את המסגרות נוקשה לתוך תהליך מחשבה גמיש. ג'ונתן סנוק”

SMACSS מזהה 5 סוגים של כללי סגנון כלומר בסיס, פריסה, מודול, מצב, ו נושא.

• סגנונות בסיס הם סגנונות ברירת המחדל המכוונים לתגי HTML הבסיסיים כמו

  , .

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

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

היתרונות של SMACSS:קוד מאורגן טוב יותר.

חסרונות של SMACSS: אף אחד שאני לא יכול לחשוב עליו.

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

סיכום

מתודולוגיות CSS לעיל ייתן לך מערכת לנהל ולייעל את קודי ה- CSS שלך. הם יכולים להיות משולבים יחד, כמו OOCSS-SMACSS, או OOCSS-BEM, או BEM-SAMCSS כדי להתאים לצרכים שלך.

יש גם מסגרות וספריות אם אתה רוצה מערכת אוטומטית לביצוע מתודולוגיות CSS כגון:

• מסגרת OOCSS
• כלים BEM
• מסגרת אורגנית CSS (בעקבות המושג האטומי).