היסודות של CSS מונחה עצמים (OOCSS)

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

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

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

מה הופך CSS מונחה עצמים?

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

OOP הפך בשימוש נרחב בשניהם JavaScript ו- backend בשנים האחרונות, אך ארגון CSS על פי עקרונותיו הוא עדיין מושג חדש.

ה “אובייקט” ב OOCSS מתייחס אלמנט HTML או כל דבר הקשור אליו (כמו כיתות CSS או שיטות JavaScript). לדוגמה, ייתכן שיהיה אובייקט יישומון Sidebar כי ניתן לשכפל למטרות שונות (הרשמה הידיעון, בלוקים מודעות, הודעות האחרונות, וכו '). CSS יכול המטרה אובייקטים אלה en-mass מה שהופך את קנה המידה רוח.

לסיכום ערך GitHub של OOCSS, אובייקט CSS עשוי לכלול ארבעה דברים:

1. צומת HTML (ים) של DOM
2. הצהרות CSS על הסגנון של צמתים אלה
3. רכיבים כמו תמונות רקע
4. התנהגויות JavaScript, מאזינים או שיטות הקשורות לאובייקט

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

מפתחים רבים יאמרו כי OOCSS קל יותר לחלוק עם אחרים וקל יותר להרים אותם לאחר חודשים (או שנים) של פיתוח לא פעיל. זה לעומת שיטות מודולריות אחרות כמו SMACSS אשר יש חוקים נוקשים יותר עבור סיווג אובייקטים ב- CSS.

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

מבנה נפרד מסגנון

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

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

הנה דוגמה של OOCSS עבור “הודעות האחרונות” widget שבמקרה זה הוא אובייקט CSS שלנו:

 / * מבנה * / .side-widget רוחב: 100%; ריפוד: 10px 5px;  / * Skinning * / .recent-posts font-family: Helvetica, Arial, sans-serif; צבע: # 2b2b2b; font-size: 1.45em;  

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

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

מיכל נפרד מהתוכן

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

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

הנה דוגמה פשוטה:

 / * OOCSS * /. Sidebar * / * sidebar content * / h2.sidebar-title / * סגנונות סגנונות h2 מיוחדים * / / * Non-OOCSS * / .sidebar / * אותו תוכן sidebar * /. Sidebar h2 / * מוסיף ספציפיות יותר מהנדרש * / 

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

הנחיות פיתוח

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

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

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

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

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

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

OOCSS + Sass

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

בידיים המוסמכות, סאס ו OOCSS יכול להיות משחק בגן עדן. תוכלו למצוא מעולה לכתוב על זה על הבלוג Sass Way.

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

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

גם לזכור את זה תחזוקת קוד היא חלק גדול של OOCSS. באמצעות Sass, העבודה שלך מקלה עם משתנים, mixins, וכלים מתקדמים linting קשור לתוך זרימת העבודה.

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

שיקולי ביצועים

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

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

תוכלו למצוא דיונים מעניינים בנושא זה באתרים כגון ערימת גלישה ו- CSS-Tricks.

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

קבל עסוק כתיבה OOCSS

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

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

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

• האתר הרשמי של OOCSS
• CSS מונחה עצמים: מה, איך, ולמה
• OOCSS + Sass = הדרך הטובה ביותר CSS
• מבוא ל- CSS מונחה עצמים