20 نکته برای کد نویسی css به شیوه مدرن بخش اول

20 نکته برای کد نویسی css به شیوه ی مدرن بخش اول

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

1. به margin collapse توجه داشته باشید

(ویژگی margin در زبان css جهت تعیین فاصله بیرونی تگ های html از 4 جهت اصلی کاربرد دارد.)
بر خلاف بسیاری از خاصیت های دیگر ، حاشیه های عمودی زمانی که به هم می رسند ، روی هم قرار می گیرند. این بدان معنی است که وقتی حاشیه ی پایین یک عنصر با حاشیه بالایی عنصر دیگر برخورد می کند ، از میان این دو ، تنها حاشیه ی بزرگ تر می ماند . یک مثال ساده در زیر آورده شده است:

.square {
    width: 80px;
    height: 80px;
}

.red {
    background-color: #F44336;
    margin-bottom: 40px;
}

.blue {
    background-color: #2196F3;
    margin-top: 30px;
}

به جای 70 پیکسل بین مربع قرمز و آبی ، فقط 40 پیکسل داریم ، حاشیه مربع آبی اصلا در نظر گرفته نمی شود . راه هایی برای جلوگیری از رخ دادن این حالت وجود دارد ، اما بهتر است فقط با آن کار کنید و از حاشیه ها فقط در یک جهت استفاده کنید ، ترجیحاً در جهت حاشیه ی پایین .

2. از فلکس باکس (flexbox) برای صفحه آرایی استفاده کنید

چند دلیل برای وجود مدل فلکس باکس وجود دارد . تگ های شناور (float) و عناصر درون خطی (inline-block) کار می کنند، اما همه ی آن ها اساساً ابزارهایی برای استایلینگ (سبک دهی) اسناد هستند ، و برای وب سایت ها به کار نمی روند . از طرف دیگر ، فلکس باکس به طور خاصی طراحی شده است تا ایجاد هر چیدمان (layout) را ، دقیقاً به همان شکلی که تصور می شود ، آسان کند .
مجموعه ی خاصیت هایی که با مدل فلکس باکس ارائه می شوند به توسعه دهندگان انعطاف پذیری زیادی ارائه می دهند هنگامی که به کاربرد این خاصیت ها عادت کنید ، انجام هر گونه طرح بندی واکنش گرا (ریسپانسیو) بسیار ساده خواهد شد . امروزه، پشتیبانی مرورگرها تقریباً عالی است . بنابراین نباید چیزی مانع از استفاده ی کامل از flexbox شود .

.container {
    display: flex;
    /* Don't forget to add prefixes for Safari */
    display: -webkit-flex;
}

3. css reset انجام دهید

اگرچه وضعیت در طول سال ها بسیار بهبود یافته است ، اما هنوز اختلاف زیادی در نحوه ی عملکرد مرورگرهای مختلف وجود دارد . بهترین راه برای حل این مشکل ، اعمال یک css reset است ، که مقادیر پیش فرض جهانی را برای همه عناصر تنظیم می کند و به شما این امکان را می دهد تا بر روی یک صفحه ی خالی شروع به کار کنید . این تکنیک نتیجه یکسانی در همه جا به همراه خواهد داشت .
کتابخانه هایی مانند normalize. css ، minireset و ress وجود دارند که این کار را به خوبی انجام می دهند و تمام ناهماهنگی های قابل تصور مرورگر را اصلاح می کنند . اگر نمی خواهید از کتابخانه استفاده کنید ، می توانید با این استایل ها یک css reset بسیار ابتدایی انجام دهید :

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

این کار ممکن است کمی سخت به نظر برسد ، اما برهم زدن حاشیه ها و فواصل درونی (paddings) در واقع چیدمان عناصر را بسیار آسان تر می کند . زیرا هیچ فاصله ی پیش فرضی بین آن ها برای در نظرگرفتن وجود ندارد . ویژگی box-sizing : border-box ، ویژگی پیشفرض مناسب دیگری است که در نکته ی بعدی بیش تر در مورد آن صحبت خواهیم کرد .

4. border-box برای تمام عناصر قابل اجراست

اکثر مبتدیان در مورد ویژگی box-sizing نمی دانند ، اما این ویژگی در واقع بسیار مهم است . به عنوان بهترین راه ، برای درک آنچه توسط این ویژگی انجام می شود ، دو مقدار ممکن آن را در نظر بگیرید :
• ناحیه ی محتوا content-box (پیش فرض) - وقتی عرض/ارتفاع را برای یک عنصر تنظیم می کنیم ، این اندازه برای محتوای آن است . همه فواصل درونی (padding) و حاشیه ها(border) در بالای آن قرار دارند . به عنوان مثال ، یک div دارای عرض 100 و فاصله ی درونی (padding) ۱۰ است، عنصر ما 120 پیکسل (۲×۱۰ + ۱۰۰) را اشغال می کند.

• border-box – فاصله ی درونی (padding) و حاشیه (border) در داخل عرض/ارتفاع گنجانده شده است . یک div با عرض : 100 پیکسل و

box- sizing: border-box ، بدون توجه به اینکه چه فواصل یا حاشیه هایی اضافه می شوند ، 100 پیکسل عرض خواهد داشت .

تنظیم border box برای همه ی عناصر ، استایلنگ همه چیز را بسیار آسان تر می کند ، زیرا نیازی نیست دائما محاسبات ریاضی را انجام دهید .

5. استفاده از تصاویر به عنوان پس زمینه

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

از ویژگی پس زمینه ی css استفاده کنید.
ممکن است این کار بیهوده به نظر برسد ، اما در واقع به دلیل اندازه ی پس زمینه، موقعیت پس زمینه ، و ویژگی های دیگر ، استایلینگ تصاویر را با حفظ اندازه و نسبت ابعاد اصلی آن ها آسان تر می کند .
یک اشکال این تکنیک این است که دسترسی به وب صفحه شما اندکی ضربه خواهد خورد ، زیرا تصاویر به درستی توسط صفحه خوان ها و موتورهای جستجو اسکرول نمی شوند . این مشکل را می توان با استفاده ویژگی object-fit حل کرد ، اما هنوز به صورت کامل توسط مرورگر پشتیبانی نمی شود .

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

لینک بخش دوم

پکیج های آموزشی جدید

ساخت فروشگاه دیجی‌کالا با ASP.Net Core

فصلِ: 8 , تعداد قسمت ها: 357 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET آموزش ASP.NET MVC آموزش ساخت فروشگاه اینترنتی

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه قصد داریم تا فروشگاه اینترنتی دیجی کالا رو با Asp.Net Core3 پیاده سازی کنیم. ابتدا طراحی قالب دیجی کالا رو به صورت کامل انجام خواهیم داد. در مرحله میریم …

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز