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

قبل از مطالعه این پست ، بخش اول را در لینک 20 نکته برای کد نویسی css به شیوه ی مدرن بخش اول ببینید. در این پست ادامه مقاله قبل را مورد بررسی قرار می دهیم.

6. کامنت های بهتر و خواناتر بنویسید

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

/*---------------
    #Header
---------------*/
header { }

header nav { }

/*---------------
    #Slideshow
---------------*/
.slideshow { }

جزئیات طراحی یا اجزای کم اهمیت تر را می توان با یک کامنت تک خطی علامت گذاری کرد .

/*   Footer Buttons   */
.footer button { }

.footer button:hover { }

همچنین ، به یاد داشته باشید که css کامنت های تک خطی // ندارد . بنابراین ، هنگام نوشتن یک کامنت ، همچنان باید از دستور / / استفاده کنید.

/*  Do  */
p {
    padding: 15px;
    /*border: 1px solid #222;*/
}

/*  Don't  */
p {
    padding: 15px;
    // border: 1px solid #222;  
}

7. تمام کاربران به نگارش کبابی ( kebab case) علاقه مند هستند

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

/*  Do     */
.footer-column-left { }

/*  Don't  */
.footerColumnLeft { }

.footer_column_left { }

وقتی نوبت به نام گذاری کلاس ها می رسد ، می توانید از روش نام گذاری bem در css نیز استفاده کنید . این روش از مجموعه ای از اصول پیروی می کند که سازگاری و رویکردی مبتنی بر مؤلفه را برای توسعه ارائه می کند .

8. خودتان را تکرار نکنید

بیش تر خاصیت های ،css از یک عنصر سطح بالا ، در درخت dom به ارث برده می شوند، که به این ویژگی برگه های آبشاری (cascading style sheets) می گویند . بیایید خصیصه ی فونت را به عنوان مثال در نظر بگیریم که تقریباً همیشه از والد به ارث می رسد . لازم نیست هر فونت را مجدداً و جداگانه برای هر عنصر در صفحه تنظیم کنید .
خیلی ساده استایل های فونتی را ، که در طراحی شما رایج هستند ، به عنصر یا اضافه کنید و اجازه دهید تا به عناصر پایین تر ادامه پیدا کنند. در اینجا چند پیش فرض خوب وجود دارد:

html {
    font: normal 16px/1.4 sans-serif;
}

بعداً می توانید استایل های هر عنصر را تغییر دهید . آنچه گفته شد صرفاً برای پرهیز از تکرار و استفاده ی بهینه از ارث بری تا حد امکان است .

9. انیمیشن های css با transform

عناصر را با تغییر مستقیم عرض (width) و ارتفاع (height) یا left/top/bottom/right متحرک نکنید . ترجیحاً از خصیصه ی transform () استفاده کنید ، زیرا انتقال های روان تری را ارائه می دهد و درک اهداف شما را هنگام خواندن کد آسان تر می کند .
به عنوان مثال ، ما می خواهیم یک توپ را متحرک کنیم و آن را به سمت راست بکشیم . به جای تغییر مقدار چپ ، بهتر است از translate () : استفاده کنیم .

.ball {
    left: 50px;
    transition: 0.4s ease-out;
}

/* Not Cool*/
.ball.slide-out {
    left: 500px;
}

/* Cool*/
.ball.slide-out {
    transform: translateX(450px);
}

ویژگی انتقال (transform) ، و همچنین تمام تابع های متعدد آن (translate، rotate ، scale و غیره) تقریباً سازگاری جهانی با مرورگرها دارند و می توان آزادانه از آن ها استفاده کرد .

لینک بخش سوم

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

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

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

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

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

…

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

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

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

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

سایر

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

6. کامنت های بهتر و خواناتر بنویسید

7. تمام کاربران به نگارش کبابی ( kebab case) علاقه مند هستند

8. خودتان را تکرار نکنید

9. انیمیشن های css با transform

آیا نیاز به مدرک هم دارید؟