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

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

לא מזמן שוחחתי עם חבר על שיטות טובות יותר לכתיבת 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.

פוסטים נוספים שכדאי לקרוא

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

מיקרו בקרים

הפעלת מסך oled קטנטן עם esp32

יצירת מערכת מולטימדיה שלמה בגודל של בול דואר עם מיקרובקר ובעלות של דולרים בודדים. וגם על הדרך נלמד על ת׳רדים

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