اشتباهات رایج در css

css چیست ؟

پس از ایجاد ساختار اولیه وب سایت توسط html ، می توانیم به وسیله ی css ظاهری زیبا و کاربردی همراه با رنگ ها ، فونت ها و... متناسب با پروژه خود بر روی این ساختار اولیه اعمال کنیم.

از جمله خصوصیاتی که می توان بر روی تگ های html توسط css اعمال کرد می توان به موارد زیر اشاره کرد:

تغییر در نوع فونت نوشته ها

تغییر در رنگ بندی بخش های مختلف وب سایت

تغییر در سایز باکس ها و بخش های مختلف سایت

اعمال ساختار متناسب با اندازه های مختلف صفحه نمایش

و...

در ادامه ، مثال هایی از اشتباهات رایج در زبان css را بررسی می کنیم.

جلوگیری از کدنویسی تکراری

از جمله مواردی که باعث کاهش حجم و افزایش سرعت وب سایت شما می شود جلوگیری از کدنویسی تکراری است برای این کار می توان مانند مثال زیر عمل کرد به این صورت که برای مثال وقتی که نیاز به استفاده از margin در جهت های مختلف داریم می توانیم یک بار آن را نوشته و از قرار دادن کد های تکراری جلوگیری کنیم.

class-margin {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
    margin-left: 20px;
}

class-margin {
    margin: 20px;
}

استفاده صحیح از px

از جمله مواردی که بسیاری از برنامه نویسان در شروع کار خود رعایت نمی کنند استفاده از واحد px برای صفر است در صورتی که بهتر است از این کار جلوگیری کنیم.

class-px {
margin: 30px 20px 0px;
}

class-px {
    margin: 30px 20px 0;
}

کد های یکسان با کلاس های مختلف

همانطور که در قسمت بالاتر این مقاله به این موضوع اشاره کردم یکی از مهمترین ویژگی های یک برنامه نویسی حرفه ای جلوگیری از کد نویسی تکراری است در مثال زیر می بینیم که میتوانیم به جای تعریف چند کلاس با یک محتوای ثابت می توانیم به شکل و ساختاری بهتر عمل کنیم:

className { 
margin: 10px;
padding: 20px;
}

classNametwo {
    margin: 10px;
padding: 20px;
}

className, classNametwo {
    margin: 10px;
    padding: 20px;
}

اشاره به تمام ویژگی های فونت

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

class-font {
font-family: Verdana;
}

class-font {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

استفاده از کد رنگ ها

در زبان css بهتر است بجای استفاده از نام رنگ ، کد rgb آن را بنویسید مانند مثال زیر :

class-color {
color: blue;
}

class-color {
color: rgb(19, 36, 190);
}

با رعایت این نکات شاید در ظاهر تفاوت آن چنانی در وب سایت شما ایجاد نشود ولی علاوه بر افزایش سرعت باعث کاهش تعداد کد ها و خوانایی بهتر آنها می شود و شما را یک قدم تا تبدیل شدن به برنامه نویسی حرفه ای کمک می کند.

امیدوارم این مقاله برای شما مفید بوده باشد.

با به اشتراک گذاشتن نظرات خود می توانید در بهبود هر چه بیشتر سایت به ما کمک کنید.

موفق و سلامت باشید.