הבעת IT

Re-אופניים הוא Buzzword ובפיתוח אינטרנט זה אומר לא שונה. זה חוסך אנרגיה, במונחים של מאמץ!

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

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

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

מפתחות מחדש אופניים של CSS:

השתמש מוסכמות למתן שמות

זה חייב להיות הגורם החשוב ביותר בקבלת CSS / HTML מחדש שמיש. מתן שמות עקבית רכיבי הדף מאפשר שימוש חוזר של רכיבי דף וסגנונות שלהם עם מעט או שינויים. בקנה אחד עם טענה זו, גם HTML5, בשינוי שינוי גדול על קודמותיה, היא להציג כמה דהינו תגיות מבנית. <article>, <section>, <header>, <aside>, ו <nav> [ מה HTML5 יביא? ]. גם ב-HTML 4 (או נמוך יותר), מומלץ לקרוא חלקים סטנדרטיים של הדף שלך consistanly כמו בדוגמה פשוטה מתחת ...

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

  <div id="container">
    <div id="header"> ... </ p>
    <div id="nav"> ... </ p>
    <div id="sidebar"> ... </ p>
    <div id="footer"> ... </ p>
   </ P> 

איפוס סגנונות ברירת מחדל (CSS מאפס): בין אם אתה משתמש במסגרת או לכתוב בעצמך, עליך לספק CSS מאפס [ מה CSS מאפס? ], כפי שהם להפחית או לחסל לפעמים חוסר עקביות חזותיים המתרחשות בין דפדפנים שונים. במילים פשוטות מנגנון איפוס CSS מגדיר את הסגנונות של אלמנט HTML ערכי אפס או ריק, ובכך מבטל את כל ערכי ברירת המחדל של הדפדפן הם תנוחות. זה מספק שולחן נקי להגדיר את המאפיינים של חלל אלמנטים אלה של כל User-agent ברירות מחדל [ CSS2.1 סוכן המשתמש סגנון ברירת מחדל גיליון ]. כל המסגרות-CSS צריך מנגנון האיפוס. אם אתה כותב את עצמו CSS מאפס, מילת אזהרה היא שאם יקרה לך לשכוח לאפס נכס מפתח, זה יכול להוביל לדפדפנים נושאים, שקשה מאוד לאתר באגים. זכור, שמור עותק של סגנונות לאפס ולשחרר אותם כל פרויקט חדש שאתה יוצר.

  הגוף, div, dl, dt, dd, ul, ol, לי,
  H1, H2, H3, H4, H5, H6,
  מראש, טופס, fieldset, קלט, בחר, Textarea,
  עמ ', blockquote, שולחן, ה, TD
  {
    גבול: 0px;
    שולי: 0;
    padding: 0;
  } 

ברירות מחדל הגדר סגנונות (בסיסית) לגורמי:

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

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

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

  html {font-size: 77%; font-family: Arial, sans-serif;}
 חזק, H1, H2, H3, H4, H5, H6 {font-weight: bold;} 

סגנונות מופשטים עבור רכיבי ה-HTML נפוצות וכיתות נפוצות:

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

מלבד הגדרת לשימוש חוזר הגדרות סגנונות עבור רכיבי ה-HTML משותפים, אנו מופשטים כיתות סגנונות יכול הקשורים לצבע הטיפוגרפיה, או אפילו פריסה. אני עצמי נוטה אתה משתמש ... כיתות נפוצות כמו Clearfix, Font08, FontGrey, AlignL, DisplayB וכו '

  קלט בצורה {גבול: 0px; הרקע: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; גובה: 26px; color: # 000000; קו גובה: 30px; font-size: 1.1em;}
 טופס Textarea {גבול: 0px; הרקע: # FFFFFF; color: # 000000; font-size: .9 אותם, גובה קו: 1.5em; גלישה: גלוי;}
 . Fbold {font-weight: bold; color: # cccccc;}
 . Fgrey {color: # 666666;}
 . Flightgrey {color: # bbbbbb;}
 . Clearfix {ברור: הן;}
 . {מפריד הגבול העליון: 1px solid # 647B06, הגבול התחתון: מוצק 1px # 9CC00A גובה: 0px;}
 . Displayb {תצוגה: לחסום;}. Displayn {display: none;}
 . Alignr {text-align: right}. Alignc {text-align: מרכז}
 . Floatr {float: right;}. Floatl {float: שמאל;} 

תיקונים המוזרויות הדפדפן נפוצות

דפדפנים שונים ליישם קוד CSS ולספק רמה שונה של תמיכה במפרט CSS. התוצאה של זה .... "הדפדפן Quirks", שאנו מפתחים שנשארו להתמודד. במיוחד, IE6 רודף coders-CSS ביותר עם מועד לפגישה. החדשות הטובות הן ניסיון הביא יחד תיקונים אפשריים לשימוש חוזר לנושאים האלה (שמכונה לעתים קרובות כמו CSS Hacks ).

זכור, זכור את פריצות / תיקונים שימושי

  / * זום הבאות: 1 הכלל הוא במיוחד עבור IE6 + IE7.  * /
    * HTML. Clearfix,
    *:. ילד ראשון + HTML clearfix {
           זום: 1;
      } 

שמור על שיפור ה-CSS שלך

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

חפש ב-CSS מסגרות

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

• 960 מערכת רשת : מערכת 960 גריד הוא מאמץ כדי לייעל את זרימת העבודה פיתוח באינטרנט על ידי מתן מידות נפוצות, בהתבסס על רוחב של 960 פיקסלים. קיימות שלוש גרסאות: 12, 16 ו -24 עמודים, אשר ניתן להשתמש בהם בנפרד או במקביל. לא חשבתי שאתה לא יכול ליצור דף כזה משלך די בקלות, במסגרת מספק תבניות רשת להדפסה בפורמט PDF, שניתן להשתמש בו כדי לשרטט designs.Bet הדף שלך, זה יעשה רושם מקצועי, אם אתה נושא כמה דפים כאשר אתה עובר ללקוח למפגש דרישות ממשק המשתמש. הוא גם מספק תבניות רשת בסיסיים תוכנות עיצוב פופולרי כמו זיקוקים, Flash, InDesign, Illustrator, Photoshop, Visio וכו 'מתן "המתנע של 10" כדי להתחיל לעבוד העיצוב שלך.
• תכנית : תכנית אב מספקת המסווגים בבירור קבצי CSS עבור מאפס, רשתות, טפסים, הדפסה, טיפוגרפיה, כפתורים, תוספים עבור כרטיסיות שדונים וכו 'הוא גם מספק תמיכה עבור IE בתור נפרד כוללים.
• SenCSs : שלא כמו 2 לעיל, SenCSs (Sense בולט), אין הגדרות CSS עבור פריסה. זה כולל גופנים, paddings, שוליים, טבלאות, רשימות, כותרות blockquotes, טפסים ועוד.
• BlueTrip : הטענה המקורית שלו לתהילה היה זה, זה היה שילוב של התכונות הטובות ביותר שמספקת מסגרות אחרים אחרים כמו כחול, טיול הדפסה Oli ... מהמקום שבו היא מקבלת את שמה. ערכת תכונות של החברה כולל 24 עמודות הרשת, סגנונות טיפוגרפיה, סגנונות ORM, הדפסה, כפתורים וכו '
• Yui רשתות : הביא לך רשת המפתחים של Yahooo, תומך נוזל רוחב (100%) פריסות, כמו גם מראש ברוחב קבוע פריסות ב 750px, 950px, 974px ו, ויכולת אישית בקלות לכל מספר. כפי שניתן לראות, מבחינה טכנית שלה רק את הפריסה של רכיבי. Yui גם סיפק HTML / CSS סטים של רכיבי דף אחרים
• YAML (עוד פריסה Multicolumn)
• Emastic

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