8 موردی که در CSS باید از انجام آنها اجتناب کنید

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

اجتناب از موارد بیهوده در CSS

برای اینکه راه‌ خود را بهتر ادامه دهیم باید این ۸ مورد را همیشه مدنظر قرار دهید.

۱- بیش از حد وارد جزییات نشوید

قانون css زیر را بررسی کنید:

#external-wrapper > .items-list + .actions a.link,
#content header nav.links > ul a,
section#external-wrapper footer.page-footer > ul a {
/*…*/
}

انتخابگرهای بالا چندین مشکل بزرگ دارند:

1. آنها از ID استفاده می­‌کنند و این امر به طور قابل توجهی باعث افزایش جزییات یک قانون می­‌شود.
2. خیلی طولانی هستند و انتخابگرهای طولانی باعث افزایش جزییات می­‌شوند.
3. این انتخابگرها بدون اینکه احتیاج باشد نام کلاس را به عنصر اضافه کرده‌­اند( به عنوان مثالpage-footer) این کار نه تنها باعث افزایش جزییات می‌شود بلکه استفاده مجدد را نیز مشکل می‌کند.

در عوض بهتر است برای اجتناب از موارد بیهوده در CSS چه کاری انجام دهیم؟

به عنوان یک قانون کلی، انتخابگرهای شما باید تا حد امکان کوتاه باشند. بهتر است یک، دو یا نهایتا سه سطح داشته باشند. در آخر، در انتخابگرهای خود ازID استفاده نکنید (در ادامه در مورد این موضوع بیشتر صحبت خواهیم کرد) و به کلاس‌های خود تگ نام اضافه نکنید.

۲- استفاده نابجا از  !important

باز هم مشکل جزییات بیش از حد پیش می­‌آید. استفاده از !important به طور معمول به این معنی است که شما سعی دارید برخی از ویژگی­‌ها را با ویژگی خاص‌تری override کنید یا اینکه نمی­‌خواهید سایر توسعه دهندگان بتوانند ویژگی تعریف شده توسط شما را override کنند. به عنوان مثال در حالت اول ممکن است سعی کنید یک مولفه شخص ثالث را سفارشی کنید.
اگر نمی­‌خواهید افراد دیگر یک یا چند ویژگی از قانونی که شما تعریف می­‌کنید را override کنند، باید از خود بپرسید: چرا؟ چرا در حالی که همه شما روی یک پروژه کار می‌کنید، سایر برنامه نویسان نباید برخی از styleهای برنامه را سفارشی کنند؟ اگر پاسخ خوبی برای این سوال ندارید شاید بهتر باشد در استفاده خود از !important تجدید نظر کنید.

در عوض بهتر است چه کاری انجام دهیم؟

اگر کدی که می­‌خواهید آن را override کنید، متعلق به شما یا تیم شما است، بهتر است !important را حذف کنید تا بتوانید انتخابگرهایی که جزییات کمتری دارند، استفاده کنید. (به مورد قبلی مراجعه کنید).
به این ترتیب، شما تنها با استفاده از یک انتخابگر دیگر با همان ویژگی قادر خواهید بود که !important را حذف کنید.

۳- CSS’s @import

@import url(“font-face.css”);
@import url(“base.css”);
@import url(“utilities.css”);

هنگامی که شما با استفاده از CSS’s @import stylesheet ها را وارد یک قانون می‌­کنید، اتفاقی که می‌افتد به صورت زیر است:

1. پرونده HTML شما بارگیری می­شود.
2. پرونده CSS شما بارگیری می­‌شود.
3. @import at-rule پیدا شده و پرونده ارجاع شده بارگیری می­‌شود.
4. اگر stylesheet وارد شده حاوی @import های بیشتری باشد، این stylesheetهای اضافی نیز بارگیری می‌شوند.
5. تنها پس از بارگیری تمام stylesheetها، اجزای گرافیکی صفحه ایجاد خواهند شد.

در عوض بهتر است برای جلوگیری از اشتباهات رایج در سی اس اس، چه کاری انجام دهیم؟

همیشه تگ <link> HTML را به @import at-rule ترجیح دهید. CSS importsها دانلود­های همزمان را متوقف می‌کنند. بهترین کار این است که تعداد stylesheetهای مورد استفاده خود را کاهش دهید (بهترین حالت انتخاب تنها یک پرونده است). استفاده از یک پردازنده یا پس‌پردازنده انجام این کار را بسیار ساده‌­تر می­‌کند، زیرا شما می­‌توانید چندین stylesheet داشته باشید و به راحتی آنها را در یک پرونده واحد ترکیب کنید. این bundle را کوچک کنید و با استفاده از تگ <link> آن را وارد کنید.

۴- نام­گذاری ناسازگار

گاهی اوقات در یک پروژه واحد، شما قوانینی مثل قانون زیر پیدا می‌کنید:

.user-panel {/*…*/}
.AlertBox {/*…*/}
.items_list {/*…*/}

این امر به خصوص در پروژه­‌هایی که توسط برنامه نویس‌های متعدد انجام می­‌شوند معمول است، اما در پروژه‌های انفرادی نیز اتفاق می‌افتد.

در عوض بهتر است چه کاری انجام دهیم؟

پروژه شما باید از یک طرح نامگذاری واحد استفاده کند. طرحی که برای شما و تیم شما مناسب باشد را انتخاب کنید و به آن پایبند باشید. یک گزینه خوب BEM است، که یک طرح نامگذاری آزمایش شده توسط هزاران تیم برنامه‌نویسی است و سال‌هاست از آن استفاده می‌شود.

5 . سی اس اس درون­ برنامه­ ای

<div style=”color: #D3D3D3; right: 0; padding: 0″></div>

استفاده مجدد یک قابلیت خوب در برنامه نویسی است. CSS هم از این قائده مستثنی نیست (حتی با وجود اینکه یک زبان برنامه نویسی نیست). کلاس­‌های CSS برای استفاده مجدد به وجود آمده‌­اند. هنگامی که شما توسط ویژگی style به بعضی از عنصر­ها style می­‌دهید، سه اشتباه بزرگ مرتکب می­‌شوید:

1. کدهای markup و presentation را با هم ترکیب می­‌کنید.
2. از آنجایی که این ویژگی­‌های CSS را برای یک عنصر خاص تعریف می­‌کنید، امکان استفاده مجدد از این کد را از بین می‌­برید.
3. Style­های درون­ برنامه‌ای اختصاصی‌­تر از style­های برون­ برنامه­‌ای هستند. تنها با استفاده از !important می‌­توانید آنها را override کنید.

در عوض بهتر است برای اجتناب از موارد بیهوده در CSS چه کاری انجام دهیم؟

آسان است: همیشه از کلاس‌­ها استفاده کنید.

۶- مقادیر غیر منطقی z-index

.sign-up-form {
z-index: 99999;
}

بسیاری از برنامه‌نویسان هنگامی که قصد دارند یک عنصر را جلوی عنصر دیگری قرار دهند، از مقادیر بالای z-index استفاده می‌کنند. وقتی‌ که شما این کار را می­‌کنید، اگر شخص دیگری نیاز به انتقال عنصر دیگری به بالای محور Z داشته باشد باید مقدار z-index را بیشتر کند و این باعث بدتر شدن اوضاع می­‌شود.

در عوض بهتر است چه کاری انجام دهیم؟

راه حل این مشکل استفاده عاقلانه و متعادل از z-index است، یعنی تنها تا حدی این مقدار را افزایش دهید که به نتیجه مورد نظر برسید، نه بیشتر. اگر از پیش پردازنده‌ای مانند Sass یا Stylus استفاده می­‌کنید، روش‌­های هوشمندان‌ه­ای برای مدیریت لایه­‌های z-index در برنامه کاربردی شما وجود دارد.

۷- استفاده از انتخابگرهای ID به جای کلاس­ ها

من با خودم تکرار می­‌کنم: استفاده مجدد چیز خوبی است. اما از IDها نمی­‌توان دوباره استفاده کرد. منظورم این است که ID فقط توسط یک عنصر در یک صفحه، قابل استفاده است. علاوه بر این، IDها باعث می­‌شوند که انتخابگر تا حدی اختصاصی شود که فقط در این موارد بتوان آن را override کرد:

1. بوسیله انتخابگر دیگری که همان ID را انتخاب کرده ­است.
2. استفاده از !important
3. استفاده از styling درون­ برنامه‌­ای

در عوض بهتر است چه کاری انجام دهیم؟

ID ها نباید برای styling استفاده شوند. تنها استثنایی که در این مورد به ذهن می‌رسد طراحی ظاهر صفحات و اجزایی است که کنترل markup آنها دست شما نیست. در این حالت، اگر تنها چیزی که از طریق آن می‌­توانید به یه عنصر ارجاع دهید ID آن است، پس می‌­توانید از آن ID استفاده کنید. در سایر موارد کلاس­‌های CSS ارجحیت دارند.

۸- کلاس­ هایی با نام بیش از حد عمومی

نامگذاری کلاس با نام­‌های خیلی عمومی نیز می‌­تواند یکی از اشتباهات رایج در سی اس اس باشد. به عنوان مثال با نام­‌هایی مانند .card، .panel، .box یا .grid، احتمال این وجود دارد که در هر لحظه ناسازگاری در برنامه شما به وجود بیاید، خصوصاً اگر stylesheetهای یک شخص ثالث را در برنامه خودimport کنید.

در عوض بهتر است چه کاری انجام دهیم؟

یک راه حل برای کوتاه نگه ­داشتن نام کلاس‌­ها، افزودن پیشوند است.(مانند .be-card یا .zo-grid) یکی دیگر از گزینه­‌ها، تکه ­کردن نام کلاس است. با استفاده از ماژول­‌های CSS، به طور مثال، stylesheetهای شما محدود می‌شود و نام کلاس شما به طور خودکار تکه خواهد شد.

نتیجه­ گیری اشتباهات رایج در سی اس اس

• برای اجتناب از موارد بیهوده در CSS، از انتخابگرهای خیلی خاص استفاده نکنید. از کلاس­‌های پیشوند با name tagها خودداری کنید.
• تا حد ممکن از !important به صورت متعادل استفاده کنید. یک مورد کاربرد خوب، override کردن style طراحی شده توسط یک شخص ثالث است.
• از CSS import استفاده نکنید. همیشه تگ <link> را ترجیح بدهید.
• یک طرح نام‌گذاری را انتخاب کنید و به آن پایبند باشید.
• از یک style درون­ برنامه‌­ای استفاده نکنید. همیشه style خود را در stylesheet جداگانه قرار دهید.
• به صورت هوشمندانه از z-index استفاده کنید. مقادیر z-index را به صورت خیلی خارج از محدوده استفاده نکنید.
• از IDها در CSS استفاده نکنید، مگر اینکه بخواهید کد شخص ثالثی که markup آنها را کنترل نمی­‌کنید، override کنید.
• از نامگذاری کلاس با نام­‌های خیلی عمومی پرهیز کنید زیرا این امر باعث ناسازگاری در کد شما می‌­شود.

آیا می‌­خواهید یک برنامه نویس حرفه‌ای بشوید؟ پس در دوره‌های برنامه نویسی آنلاین من شرکت کنید. اگر این مقاله را دوست داشتید آن را با دوستانتان به اشتراک بگذارید.