8 موردی که در CSS باید از انجام آنها اجتناب کنید
بعضی از افراد میگویند که یادگیری CSS آسان و تسلط بر آن دشوار است. البته حق با آنهاست. همان اندازه که یادگیری اصول CSS آسان است، اشتباه کردن در برنامه نویسی CSS هم آسان است. اما در این مقاله یاد میگیرید این اشتباهات را تشخیص دهید و اجتناب از موارد بیهوده در CSS را باید سرلوحه کار خود قرار دهید.
اجتناب از موارد بیهوده در CSS
برای اینکه راه خود را بهتر ادامه دهیم باید این 8 مورد را همیشه مدنظر قرار دهید.
1- بیش از حد وارد جزییات نشوید
قانون css زیر را بررسی کنید:
#external-wrapper > .items-list + .actions a.link,
#content header nav.links > ul a,
section#external-wrapper footer.page-footer > ul a {
/*…*/
}
انتخابگرهای بالا چندین مشکل بزرگ دارند:
- آنها از ID استفاده میکنند و این امر به طور قابل توجهی باعث افزایش جزییات یک قانون میشود.
- خیلی طولانی هستند و انتخابگرهای طولانی باعث افزایش جزییات میشوند.
- این انتخابگرها بدون اینکه احتیاج باشد نام کلاس را به عنصر اضافه کردهاند( به عنوان مثالpage-footer) این کار نه تنها باعث افزایش جزییات میشود بلکه استفاده مجدد را نیز مشکل میکند.
در عوض بهتر است برای اجتناب از موارد بیهوده در CSS چه کاری انجام دهیم؟
به عنوان یک قانون کلی، انتخابگرهای شما باید تا حد امکان کوتاه باشند. بهتر است یک، دو یا نهایتا سه سطح داشته باشند. در آخر، در انتخابگرهای خود ازID استفاده نکنید (در ادامه در مورد این موضوع بیشتر صحبت خواهیم کرد) و به کلاسهای خود تگ نام اضافه نکنید.
2- استفاده نابجا از !important
باز هم مشکل جزییات بیش از حد پیش میآید. استفاده از !important به طور معمول به این معنی است که شما سعی دارید برخی از ویژگیها را با ویژگی خاصتری override کنید یا اینکه نمیخواهید سایر توسعه دهندگان بتوانند ویژگی تعریف شده توسط شما را override کنند. به عنوان مثال در حالت اول ممکن است سعی کنید یک مولفه شخص ثالث را سفارشی کنید.
اگر نمیخواهید افراد دیگر یک یا چند ویژگی از قانونی که شما تعریف میکنید را override کنند، باید از خود بپرسید: چرا؟ چرا در حالی که همه شما روی یک پروژه کار میکنید، سایر برنامه نویسان نباید برخی از styleهای برنامه را سفارشی کنند؟ اگر پاسخ خوبی برای این سوال ندارید شاید بهتر باشد در استفاده خود از !important تجدید نظر کنید.
در عوض بهتر است چه کاری انجام دهیم؟
اگر کدی که میخواهید آن را override کنید، متعلق به شما یا تیم شما است، بهتر است !important را حذف کنید تا بتوانید انتخابگرهایی که جزییات کمتری دارند، استفاده کنید. (به مورد قبلی مراجعه کنید).
به این ترتیب، شما تنها با استفاده از یک انتخابگر دیگر با همان ویژگی قادر خواهید بود که !important را حذف کنید.
3- CSS’s @import
- @import url(“font-face.css”);
- @import url(“base.css”);
- @import url(“utilities.css”);
هنگامی که شما با استفاده از CSS’s @import stylesheet ها را وارد یک قانون میکنید، اتفاقی که میافتد به صورت زیر است:
- پرونده HTML شما بارگیری میشود.
- پرونده CSS شما بارگیری میشود.
- @import at-rule پیدا شده و پرونده ارجاع شده بارگیری میشود.
- اگر stylesheet وارد شده حاوی @import های بیشتری باشد، این stylesheetهای اضافی نیز بارگیری میشوند.
- تنها پس از بارگیری تمام stylesheetها، اجزای گرافیکی صفحه ایجاد خواهند شد.
در عوض بهتر است برای جلوگیری از اشتباهات رایج در سی اس اس، چه کاری انجام دهیم؟
همیشه تگ <link> HTML را به @import at-rule ترجیح دهید. CSS importsها دانلودهای همزمان را متوقف میکنند. بهترین کار این است که تعداد stylesheetهای مورد استفاده خود را کاهش دهید (بهترین حالت انتخاب تنها یک پرونده است). استفاده از یک پردازنده یا پسپردازنده انجام این کار را بسیار سادهتر میکند، زیرا شما میتوانید چندین stylesheet داشته باشید و به راحتی آنها را در یک پرونده واحد ترکیب کنید. این bundle را کوچک کنید و با استفاده از تگ <link> آن را وارد کنید.
4- نامگذاری ناسازگار
گاهی اوقات در یک پروژه واحد، شما قوانینی مثل قانون زیر پیدا میکنید:
.user-panel {/*…*/}
.AlertBox {/*…*/}
.items_list {/*…*/}
این امر به خصوص در پروژههایی که توسط برنامه نویسهای متعدد انجام میشوند معمول است، اما در پروژههای انفرادی نیز اتفاق میافتد.
در عوض بهتر است چه کاری انجام دهیم؟
پروژه شما باید از یک طرح نامگذاری واحد استفاده کند. طرحی که برای شما و تیم شما مناسب باشد را انتخاب کنید و به آن پایبند باشید. یک گزینه خوب BEM است، که یک طرح نامگذاری آزمایش شده توسط هزاران تیم برنامهنویسی است و سالهاست از آن استفاده میشود.
5 . CSS درون برنامه ای
<div style=”color: #D3D3D3; right: 0; padding: 0″></div>
استفاده مجدد یک قابلیت خوب در برنامه نویسی است. CSS هم از این قائده مستثنی نیست (حتی با وجود اینکه یک زبان برنامه نویسی نیست). کلاسهای CSS برای استفاده مجدد به وجود آمدهاند. هنگامی که شما توسط ویژگی style به بعضی از عنصرها style میدهید، سه اشتباه بزرگ مرتکب میشوید:
- کدهای markup و presentation را با هم ترکیب میکنید.
- از آنجایی که این ویژگیهای CSS را برای یک عنصر خاص تعریف میکنید، امکان استفاده مجدد از این کد را از بین میبرید.
- Styleهای درون برنامهای اختصاصیتر از styleهای برون برنامهای هستند. تنها با استفاده از !important میتوانید آنها را override کنید.
در عوض بهتر است برای اجتناب از موارد بیهوده در CSS چه کاری انجام دهیم؟
آسان است: همیشه از کلاسها استفاده کنید.
6- مقادیر غیر منطقی z-index
.sign-up-form {
z-index: 99999;
}
بسیاری از برنامهنویسان هنگامی که قصد دارند یک عنصر را جلوی عنصر دیگری قرار دهند، از مقادیر بالای z-index استفاده میکنند. وقتی که شما این کار را میکنید، اگر شخص دیگری نیاز به انتقال عنصر دیگری به بالای محور Z داشته باشد باید مقدار z-index را بیشتر کند و این باعث بدتر شدن اوضاع میشود.
در عوض بهتر است چه کاری انجام دهیم؟
راه حل این مشکل استفاده عاقلانه و متعادل از z-index است، یعنی تنها تا حدی این مقدار را افزایش دهید که به نتیجه مورد نظر برسید، نه بیشتر. اگر از پیش پردازندهای مانند Sass یا Stylus استفاده میکنید، روشهای هوشمندانهای برای مدیریت لایههای z-index در برنامه کاربردی شما وجود دارد.
7- استفاده از انتخابگرهای ID به جای کلاس ها
من با خودم تکرار میکنم: استفاده مجدد چیز خوبی است. اما از IDها نمیتوان دوباره استفاده کرد. منظورم این است که ID فقط توسط یک عنصر در یک صفحه، قابل استفاده است. علاوه بر این، IDها باعث میشوند که انتخابگر تا حدی اختصاصی شود که فقط در این موارد بتوان آن را override کرد:
- بوسیله انتخابگر دیگری که همان ID را انتخاب کرده است.
- استفاده از !important
- استفاده از styling درون برنامهای
در عوض بهتر است چه کاری انجام دهیم؟
ID ها نباید برای styling استفاده شوند. تنها استثنایی که در این مورد به ذهن میرسد طراحی ظاهر صفحات و اجزایی است که کنترل markup آنها دست شما نیست. در این حالت، اگر تنها چیزی که از طریق آن میتوانید به یه عنصر ارجاع دهید ID آن است، پس میتوانید از آن ID استفاده کنید. در سایر موارد کلاسهای CSS ارجحیت دارند.
8- کلاس هایی با نام بیش از حد عمومی
نامگذاری کلاس با نامهای خیلی عمومی نیز میتواند یکی از اشتباهات رایج در سی اس اس باشد. به عنوان مثال با نامهایی مانند .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 کنید.
- از نامگذاری کلاس با نامهای خیلی عمومی پرهیز کنید زیرا این امر باعث ناسازگاری در کد شما میشود.
آیا میخواهید یک برنامه نویس حرفهای بشوید؟ پس در دورههای برنامه نویسی آنلاین من شرکت کنید. اگر این مقاله را دوست داشتید آن را با دوستانتان به اشتراک بگذارید.