מבוא ITCSS עבור מפתחי אינטרנט

יש קומץ של שיטות נהדר עבור מבנה קוד, וכולם עובדים בדרכים שונות. הנפוצים ביותר הם OOCSS ו SMACSS, אבל יש גם שיטה פחות ידועה בשם ITCSS (משולש CSS הפוך) נוצר על ידי הארי רוברטס.

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

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

מה זה ITCSS??

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

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

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

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

הנה כמה מן היתרונות הגדולים ביותר של השימוש ITCSS:

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

מערכת ITCSS

בואו נסתכל איך מודל משולש הפוך עושה שימוש באיור הבא מן ההודעה של Lubos Kmetko.

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

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

בואו נעיף מבט מהיר כל חלק של המשולש הפוכה נע מלמעלה למטה עד קצה.

• הגדרות - משתנים Preprocessor ושיטות (ללא פלט CSS בפועל)
• כלים - Mixins ופונקציות (ללא פלט CSS בפועל)
• גנרית - CSS מאופס שעשוי לכלול את האיפוס של Eric Meyer, Normalize.css או את קוד הקוד שלך
• אלמנטים - אלמנטים בודדים של HTML HTML ללא שיעורים
• אובייקטים - חוגים למבנה הדף בדרך כלל בעקבות מתודולוגיית OOCSS
• רכיבים - שיעורים אסתטיים לעיצוב כל מרכיבי הדף (המשולבים לעתים קרובות עם המבנה של מחלקות אובייקטים)
• טראמפ - סגנונות ספציפיים ביותר עבור overriding כל דבר אחר במשולש

כל שכבה של המשולש הפוך יכול להיות מותאם לצרכים שלך. אז אם אתה לא משתמש preprocessor CSS אז אתה לא צריך את הגדרות או שכבות כלים.

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

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

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

BEM + IT = BEMIT שמות

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

כל רכיב ב- BEM מתאר מוסכמת מתן שמות עבור שיעורי CSS:

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

BEMIT היא האמנה למתן שמות שאומצה על ידי ITCSS, אשר לווה רעיונות מ BEM תוך יישום רעיונות חדשים עם ITCSS.

תחביר BEM מכתיב כללים ספציפיים מאוד. להלן דוגמה מדגם BEM:

.טופס  .form - theme-xmas  .form - simple  .form__input  .form__submit . form__submit - מושבת . 

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

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

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

הנה כמה דוגמאות קוד המייצג אופייני שמות BEMIT שמות.

  
... 
 
 

הוא גם ממליץ להשתמש @ סיומת לשיעורים המבוססים על סגנונות מדיה. אז ה .o-media המעמד עשוי להשתנות .o-media @ lg עבור מסכים גדולים, ו .o-media @ md עבור מסכי בגודל בינוני.

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

אני ממליץ מאוד לקרוא מאמר זה מבוא BEMIT כדי ללמוד עוד על למה ITCSS המורחבת BEM, וכיצד מומלץ לרשום את הכיתות CSS שלך.

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

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

מסיימים

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

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

• ניהול פרויקטי אינטרנט בקנה מידה גדול עם ארכיטקטורת CSS חדשה ITCSS (creativebloq.com)
• ניהול פרוייקטים עם CSS ITCSS - מצגת שקופיות (speakerdeck.com)
• CSS פרויקטים עם ITCSS (1hr מצגת וידאו)
• ITCSS - דרך מעניינת לארגן פרויקטים בקנה מידה גדול (css-tricks.com)

(תמונת שער באמצעות speakerdeck.com)