איך לכתוב קובץ CSS נכון (Best practices) - חלק ב'

החלק השני בנושא כתיבת קובץ CSS נכון ותקני.

בינוני 5,245 צפיות

מה תצטרך

  • CSS
  • כתיבה נכונה
  • איך לכתוב CSS נכון

שלבים

  1. 1

    שלב 1

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

    שלב 2

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

    שלב 3

    ניתן להשתמש בקומפרסורים אשר מקטינים את נפח קובץ הCSS שלכם. זה אמנם יקטין את הנפח ויגדיל יעילות אבל זה יהפוך את הקובץ שלכם להרבה פחות קריא, לכן מומלץ לעשות זאת (אם בכלל) רק בסוף הכתיבה לאחר שסיימתם. קומפרסורים לדוגמא: http://www.cssoptimiser.com/ http://www.csscompressor.com/
  4. 4

    שלב 4

    בדקו האם קוד הCSS עובר ואלידציה ועובר את תקן הw3c, בכדי לבדוק האם אין שגיאות בקוד שלכם תוכלו להכנס לאתר http://jigsaw.w3.org/css-validator ולהכניס בשורת הכתובת את האתר שלכם, לאחר שתלחצו אנטר תקבלו פלט עם כל שגיאות הCSS באתר שלכם וכיצד לתקן אותם.

מדריכים קשורים

איך לכתוב קובץ CSS נכון (Best practices) - חלק א'

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

בינוני 6K צפיות
מדריך CSS מספר 17 - איך להוסיף אפקטים מיוחדים לסלקטורים בעזרת פסאודו קלאסים (Pseudo-classes)

מדריך CSS מספר 17 - איך להוסיף אפקטים מיוחדים לסלקטורים בעזרת פסאודו קלאסים (Pseudo-classes)

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

בינוני 6K צפיות
מדריך CSS מספר 12 - איך לעשות מרווחים (Margins)

מדריך CSS מספר 12 - איך לעשות מרווחים (Margins)

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

בינוני 5K צפיות
מדריך CSS: עיצוב אלמנטי HTML באמצעות מאפיינים ספציפיים

מדריך CSS: עיצוב אלמנטי HTML באמצעות מאפיינים ספציפיים

למדו איך לעצב אלמנטי HTML על סמך המאפיינים שלהם, גם ללא CLASS או ID, באמצעות בוררי CSS מתקדמים.

קל 5K צפיות
איך להתקין firebug בגוגל כרום בשביל לצפות בקוד מקור של אתרי אינטרנט

איך להתקין firebug בגוגל כרום בשביל לצפות בקוד מקור של אתרי אינטרנט

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

קל 8K צפיות
מדריך CSS: רקעים (background) - איך לשלוט ברקע האתר שלך

מדריך CSS: רקעים (background) - איך לשלוט ברקע האתר שלך

למדו איך להשתמש ב-CSS כדי לשלוט ברקע של אלמנטים באתר. מדריך מפורט עם דוגמאות וטיפים לשימוש נכון ב-CSS background.

קל 8K צפיות