الاختزال في css

فائدة الاختزال هي تقليل عدد الاسطر وبالتالي التقليل من حجم ملف css بالإضافة طبعا الى ان أكواد css ستكون أكثر وضوحا واحترافية ..

سأبحث هنا عن القيم المشتركة بين الكلاسات p و h3 و input وهي نفسها tags موجودة في xhtml

p {
	text-align: justify;
	font: 1em/1.2em Tahoma;
	color:#333;
	padding: .4em
}
 
h3 {
	margin: 0;
	padding: .4em;
	line-height: 1em;
 
}
 
input {
	color: #333;
	padding:  .4em;
	border:  1px solid #ddd;
}

الأسطر بعد الاختزال، فصلت بين الكلاسات التي تشترك في بعض القيم بالفاصلة:

p {
	text-align:justify;
	font:1em/1.2em Tahoma
}
 
h3 {
	margin:0;
	line-height:1.2em
}
 
input {
	border:1px solid #ddd
}
 
p,input {
	color:#333
}
 
p,h3,input {
	padding:.4em
}

يمكن ايضا كتابة أوامر css في سطر واحد لكسب المزيد من byte ..

p{text-align:justify;font:1em/1.2em Tahoma}
h3{margin:0;line-height:1.2em}
input{border:1px solid #ddd}
input,p{color:#333}input,h3,p{padding:.4em}

بالنسبة لي، أفضل كتابة الأوامر سطرا تحت سطر فهي تكون أكثر وضوحا ويسهل الوصول الى أمر عند التعديل ..

ايضا من بين الخصائص التي نكررها بكثرة في ملف css تاثيرات الروابط:

a:link {
   text-decoration: none;
   color:#333;
 
} 
a:visited {
   text-decoration: none;
   color:#919191;	
}
a:hover{
   text-decoration: none;
   color:#000;		
}

بعد الاختزال:

a:link {
	color:#333
}
 
a:visited {
	color:#919191
}
 
a:hover {
	color:#000
}
a:link, a:visited, a:hover {
	text-decoration:none
}

أعتقد ان الامر سهل وبسيط ؟ وستكون اكوادك اكثر اختصارا وقوة ..

أضف تعليقاً