در این آموزش می خواهیم مجموعه ای از نکات مفید و تمرین هایی که توسط جامعه CSS توصیه شدند رو با شما به اشتراک بگذاریم. برخی از این ها برای افراد مبتدی نوشته شده و برخی دیگر پیشرفته تر هستند, به هرحال امیدوارم هرکسی نکاتی رو یاد بگیره که مفید باشه.
1. مراقب سقوط Margin ها باشید
برخلاف سایر پراپرتی ها, margin های عمودی وقتی به هم می رسند سقوط می کنند. این یعنی وقتی margin پایین یک عنصر margin بالای عنصر دیگری رو لمس می کنه, فقط اونی که بزرگ تر باشه نجات پیدا میکنه. یک مثال ساده از این مورد :
HTML
<div class="square red"></div>
<div class="square blue"></div>
CSS
.square {
width: 80px;
height: 80px;
}
.red {
background-color: #F44336;
margin-bottom: 40px;
}
.blue {
background-color: #2196F3;
margin-top: 30px;
}
به جای فاصله 70px بین مربع قرمز و آبی, ما فقط 40px داریم, چون margin مربع آبی اصلا اعمال نمیشه. راه هایی وجود داره که با این رفتار مقابله کنیم, اما بهتره که باهاش مقابله نکنیم و margin ها رو فقط در یک جهت قرار بدیم, ترجیحا margin-bottom.
2. استفاده از Flexbox برای طرح بندی (Layout)
مدل flexbox برای یک دلیل وجود داره. float ها و inline-block ها کار کنند, اما این ها ابزارهای ضروری برای استایل دهی به مستندات هستند و نه وبسایت ها. از طرفی Flexbox مخصوصا طراحی شده که به سادگی بشه هر طرحی که پیش بینی کردید رو پیاده سازی کنید.
مجموعه ای از ویژگی ها که با مدل flexbox عرضه شده, میزان زیادی انعطاف پذیری به توسعه دهندگان میده, و زمانی که شما ازش استفاده کنید, انجام هر طرح واکنش گرا ساده میشه.
.container {
display: flex;
/* Don't forget to add prefixes for Safari */
display: -webkit-flex;
}
3. تنظیم مجدد CSS را انجام بدید (CSS Reset)
با اینکه در طول این چند سال وضعیت به کلی بهبود پیدا کرده, همچنان ناپایداری هایی در بین رفتار مرورگرها وجود داره. بهترین راه برای حل این مشکل اعمال تنظیم مجدد CSS برای تمام عناصر هست که به شما اجازه میده یک استایل تمیز داشته باشید.
کتابخانه هایی مثل normalize.css و ress وجود داره که این کار رو انجام می دهند, و تمام ناپایداری های مرورگرها رو برطرف می کنند. اگر شما نمی خواهید از کتابخانه ای استفاده کنید, میتونید از CSS Reset پایه استفاده کنید برای مثال :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
4. Border-box برای همه
اکثر تازه کارها درمورد پراپرتی box-sizing به خوبی اطلاع ندارند اما این بسیار مهمه. بهترین راه برای درک اون, بررسی دو مقدار قابل تنظیمش هست :
- content-box (پیش فرض) : وقتی ما مقادیر width/height رو برای یک عنصر تنظیم می کنیم, این فقط اندازه ی محتوایش هست. تمام padding ها و border ها بالای اون قرار می گیرند. برای مال یک div با طول 100 و padding برابر 10 وجود داره, پس این عنصر 120 پیکسل خواهد بود (100+2*10).
- border-box : در این حالت padding و border در width/height شامل می شوند. یک div رو با طول 100 پیکسل در نظر بگیرید که box-sizing: border-box قرار دادیم. این عنصر به هر حال 100 پیکسل طول داره, مهم نیست که padding یا border داره یا خیر.
5. تصاویر به عنوان بک گراند
وقتی تصاویر رو به طرح اضافه می کنید, مخصوصا زمانی که می خواهید واکنش گرا کار کنید, به جای عنصر img از یک div با پراپرتی Background در CSS استفاده کنید.
ممکنه که بنظر برسه این یک کار اضافست اما باعث میشه راحت تر استایل دهی بشه, با وجود background-size اندازه اورجینال و aspect-ratio حفظ بشه و سایر پراپرتی های موجود اعمال بشه.
HTML
<section>
<p>Img element</p>
<img src="https://tutorialzine.com/media/2016/08/bicycle.jpg" alt="bicycle">
</section>
<section>
<p>Div with background image</p>
<div></div>
</section>
CSS
img {
width: 300px;
height: 200px;
}
div {
width: 300px;
height: 200px;
background: url('https://tutorialzine.com/media/2016/08/bicycle.jpg');
background-position: center center;
background-size: cover;
}
section{
float: left;
margin: 15px;
}
یک اشکال این روش اینه که دسترسی وب صفحه ی شما کمی دچار آسیب میشه چون این تصاویر توسط موتورهای جستجو خزیده نمی شوند. این مشکل با استفاده از object-fit برطرف میشه اما هنوز پشتیبانی کامل مرورگر ها رو نداره.
6. Border بهتر جداول
جداول در HTML جالب نیستند. اونها دمدمی مزاج هستند, تقریبا غیرممکنه که بشه واکنش گراشون کرد, و در کل استایل دهی دشواری دارند. برای مثال اگر شما بخواهید چند border ساده به جدول و سلول های اون اضافه کنید, احتمالا به این نتیجه رسیدید :
همینطور که می بینید, بطور کامل border های تکراری وجود دارند و نمای خوبی نداره. یک راه ساده برای حذف این border های اضافی استفاده از border-collapse: collapse در جدول هست :
7. کامنت های بهتری بنویسید
درسته که CSS زبان برنامه نویسی نیست اما همچنان کدهاش نیاز به مستندسازی داره. چند کامنت ساده میتونه یک استایل شیت رو سازماندهی کنه و اون رو برای دیگران یا آینده ی خودتون قابل دسترس تر کنه.
برای بخش های بزرگتر CSS مثل اجزای اصلی یا کوئری media, بصورت زیر عمل کنید :
/*---------------
#Header
---------------*/
header { }
header nav { }
/*---------------
#Slideshow
---------------*/
.slideshow { }
جزئیات در طرح یا اجزای کم اهمیت میتونه توسط یک خط کامنت نوشته بشه :
/* Footer Buttons */
.footer button { }
.footer button:hover { }
8. انتخاب درست نام ها
زمانی که نام های کلاس و id ها بیش از یک کلمه دارند, باید با یک خط ربط (-) نوشته بشه. CSS حساس به بزرگی - کوچکی واژه ها نیست پس camelCase یک گزینه نیست. پس بهتره به صورتی که گفته شده نام گذاری کنید :
/* Do */
.footer-column-left { }
/* Don't */
.footerColumnLeft { }
.footer_column_left { }
وقتی صحبت از نامگذاری میشه, بهتره شما BEM رو که مجموعه ای از اصول برای افزودن ثبات و رویکرد مبتنی بر اجزا رو فراهم میکنه, در نظر بگیرید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید