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.

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

עבודה בהיי טק

איך מראיינים סניורים?

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

מיקרו בקרים

בית חכם עם ESPHome ו Home Assistant

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

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