כיצד לייעל CSS עם קוד סגנון מדריכים

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

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

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

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

קוד סגנון מדריכים לעומת ספריות דפוס

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

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

שני מדריכי סגנון קוד וספריות דפוס לכלול אסטרטגיית סגנון, אבל סוג אחר. ספריות תבניות, כגון Bootstrap, Zurb Foundation, שפת הניסיון הגלובלית של BBC או ספריית התבניות של MailChimp, מספקות לנו ממשק משתמש עם כיתות CSS מראש, טיפוגרפיה, ערכת צבעים, לפעמים מערכת רשת ודפוסי עיצוב אחרים.

קוד CSS מדריכים, כגון Evernote או ThinkUp של (או אלה המוזכרים מבוא) מכילים הכללים על איך לכתוב CSS כולל דברים כמו שמות מוסכמות, מבנה קובץ, סדר רכוש, עיצוב קוד, ואחרים.

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

בנה את קוד ה- CSS שלך מדריך

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

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

לדוגמה AirBnB מראה דוגמאות טובות ורעות למפתחים בדרך הבאה לעיכול בקלות:

מבנה קובץ

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

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

קינון

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

 .class_1 .class_2 # id_1 # id_2 li a span color: #bad; 

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

חוקי מתן שמות

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

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

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

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

כללי עיצוב

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

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

צו הכרזה

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

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

1. תצוגה
2. מיקום
3. מודל תיבה
4. צבעים וטיפוגרפיה
5. אחר

יחידות וערכים

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

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

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

.class // good margin: 0; // bad margin: 0px; // bad margin: 0em; // שולי רע: 0rem; 

להגיב

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

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