جهت ورود به تالار گفتمان سایت کلیک کنید


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;
}

پخش اختصاصی 

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

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

4 پاسخ به “10 نکته مهم و اساسی در بهینه سازی کدهای Css”

  1. میلاد گفت:

    سلام
    تشکر، البته به نظر من اگه از هاست پرسرعتی استفاده نمی کنیم و یا وبلاگ نویس هستیم و هاست مختص به خودمون نداریم بهتره که از css داخلی استفاده کنیم، چون که فایل خارجی css اگه قرار بدیم ممکنه لود نشه(با توجه به کیفیت و سرعت هاست های رایگان)
    البته این نظره منه و ممکنه اشتباه باشه.

    • وحید مجیدی گفت:

      اتفاقا درسته میلاد جان …

      • حمید گفت:

        این فقط در موارد بسیار محدود درست می باشد، اگر صفحه ای سنگین باشه چاره ای نیست به جز استفاده از css خارجی، زیرا مرورگر این فایل css را یک بار بارگذاری میکند و برای دفعه های دیگر نیازی به بارگذاری دوباره ندارد و در نتیجه نتها این صفحه بلکه تمامی صفحاتی که از این فایل css استفاده میکنند با سرعت بیشتری بارگذاری می شوند.

        به نظر من این تکنیک تنها برای سایت های سبک مناسب می باشد، و البته تعداد صفحات محدود و کم.

        • وحید مجیدی گفت:

          دوست عزیزم با توجه به وب سایت های حال روز دنیا , تقریبا ما دیگر وب سایت حرفه ای سبک نداریم

          ضمنا فقط بحث سرعت در میان نیست , بلکه قابلیت تغییر بسیار سریع و کلی نویسی در external بسیار مشهود است

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *