אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » 5 טיפים לכתיבה טובה יותר של CSS

5 טיפים לכתיבה טובה יותר של CSS

רן בר-זיק מרץ 10, 2009 11:29 pm אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

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

1. לבצע ריסט ל-CSS

הנה מאמר קצר בנושא הכל כך פשוט אך כל כך חשוב הזה.

ואגב, המנעו מלכתוב * בריסט שלכם (או בכלל ב-CSS שלכם) זה מאט את טעינת הדף.

2. סידור הפרמטרים לפי סדר ה-ABC

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


div#header h1 {
	border-bottom: 1px solid #dedede;
	color: #000;
	font-size: 18px;
	line-height: 24px;
	margin-right: 48px;
	position: relative;
	z-index: 101;
}

3. סידור הגיוני לפי קטגוריות

כדאי להשתמש בהערות על מנת לחלק את ה-CSS לחלקים ולתתי חלקים – למשל Header וחלקיו השונים ואז container וחלקיו השונים. כדאי להשתמש בשמות מקובלים לקטגוריות – footer, header ו-container נחשבים לשמות מקובלים.

4. עקביות

הכי מעצבן זה לראות קוד כזה:


div#header { float: left; width: 100%; }
div#header div.column {
	border-right: 1px solid #ccc;
	float: right;
	margin-right: 50px;
	padding: 10px;
	width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }

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

5. כתבו את ה-HTML לפני ה-CSS

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
מידע למפתחים עיצוב אתרי אינטרנט
ללמוד ג'אווהסקריפט בעברית

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

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד