10 نکته مهم و اساسی در بهینه سازی کدهای Css

پیرو 15 نکته در مورد بهینه سازی وب سایت در چند پست قبل  برای Seo , امروز تصمیم گرفتم پستی در مورد نکات اساسی و بسیار مهم در مورد طریقه صحیح کدنویسی Css بنویسم .

متاسفانه بسیاری از کدنویسان ایرانی , بسیاری از نکات مهم در مورد کدنویسی رو رعایت نمیکنن و به هیچ عنوان به صورت استاندارد کدنویسی نمیکنند . 

در این پست قصد دارم نکاتی برای استاندارد سازی کدها به عنوان یک برنامه نویس کوچک از میان بقیه دوستان برنامه نویس , به این مطالب بپردازم .

طبیعتا استاندارد نوشتن , نه تنها به زیبایی کار , بلکه به بهینه سازی سرعت بارگذاری وب سایت و البته بهینه سازی برای موتورهای جستجو کمک میکند .

1 – اگر دارای چندین فایل Css هستید , حتما تمامی فایل هارو در یک فایل مجزا بنویسید . یک فایل Css حجیم , بسیار بهتر از چند فایل Css کوچک تر هست . چون تعداد درخواست Http کمتر و در نتیجه سرعت بارگذاری بالاتر میرود . یکی از روشهای اضافه کردن Css به Css اصلی سایت , استفاده از کلمه کلیدی @import میباشد . به هیچ عنوان از این روش استفاده نکنید . این کار باعث کاهش سرعت بارگذاری و البته مشکلاتی در IE های قدیمی میشود .

2 – از سه روش بارگذاری Css ( خارجی , داخلی , درون خطی ) , از روش خارجی استفاده شود . به این دلیل که در حافظه کش مرورگر ذخیره و دسترسی به آن در صفحات دیگر به سرعت انجام میپذیرد . 

3 – حتما فایل Css را به روش صحیح و حتما در بالای صفحات بارگذاری کنید .

به عنوان نمونه :

<link type="text/css" rel="stylesheet" href="style.css">

4 – کدهای Css رو به همون ترتیبی که در Html کدنویسی کرده اید بنویسید . یعنی از Header تا Footer به ترتیب کدنویسی کنید و مثلا خاصیت های تگ فوتر که در آخر Html هست , در اول Css ننویسید و به همین ترتیب …

5 – کلاس ها یا آی دی هایی که دارای خاصیت های مشترک هستند , تا حد امکان در گروه بندی های یکسان قرار دهید .

نمونه غلط :

div1{
	width:200px;
	height:200px;
	background-color:#096;
}
div2{
	width:200px;
	height:200px;
	background-color:#096;
}

نمونه صحیح :

div1, div2{
	width:200px;
	height:200px;
	background-color:#096;
}

 6 – از گذاشتن ; در آخرین خصوصیت هر کلاس یا آی دی خودداری کنید .

نمونه غلط :

vahid-majidi{
	width:100px;
	height:100px;
	background-color:#309;	
}

نمونه صحیح : 

vahid-majidi{
	width:100px;
	height:100px;
	background-color:#309	
}

 7 – از توضیحات و کامنت های اضافی پرهیز کنید .

نمونه غلط :

/*************************
* Code By Vahid Majidi *
**************************/

نمونه صحیح :

/* Code By Vahid Majidi */

 8 – در درج رنگهایی که دو به دو شبیه هم هستند , از کد دهی هگزا استفاده کنید .

نمونه غلط :

.vahid-majidi{
     background-color:#116699	
}

نمونه صحیح : 

.vahid-majidi{
     background-color:#169	
}

 9 – در کدنویسی خصوصیاتی از جمله Padding , Margin و … خلاصه نویسی کنید .

نمونه غلط :

.vahid-majidi{
	padding-top:50px;
	padding-bottom:10px;
	padding-left:0px;
	padding-right:25px;
}

نمونه صحیح : ( توجه : برای خلاصه نویسی به سمت عقربه های ساعت حرکت کنید , یعنی بالا – راست – پایین – چپ )

.vahid-majidi{
	padding:50px 25px 10px 0;
}

 10 – خیلی از دیزاینر ها از Css های ریست برای همگام سازی تمامی مرورگرها برای نمایش یکسان استفاده میکنند . کار خوبی هست اما میتونید با چند خاصیت ساده , این کار رو نه به صورت کامل بودن Css ریست , اما تا حد قابل توجهی انجام دهید .

با استفاده از خصوصیات زیر ,  در داخل سلکتور *  که در برگیرنده ی تمامی تگ ها می باشد , خصوصیات زیر را وارد نمایید .

*{
	margin:0px;
	padding:0px;
	border:none;
	outline:none;
}

پخش اختصاصی 

توجه : بخش عدیده ای از این مطالب به صورت علمی و بخشی به صورت تجربی خود بنده ( وحید مجیدی ) بدست آمده …