۶ اشتباهی که در کدنویسی با CSS مرتکب می‌شویم

اگر از مخاطبین راکت بوده باشید مطمئنا با زبان کدنویسی CSS آشنایی دارید. CSS یک زبان استایل‌شیت قدرتمند است که در طراحی و استایل دهی به صفحات وب به توسعه دهندگان فرانت-اند کمک می‌کند. در بین سه تکنولوژی اصلی وب (HTML-CSS-JS) یکی از کلیدی‌ترین نقش‌ها را برعهده دارد و در نتیجه یک تکنولوژی بسیار مهم است.

البته که یادگیری مقدمات CSS آسان بوده و کار با آن و ایجاد پروژه کاری غیر ممکن نیست، اما زمانی که در مسیر پروژه و عملکرد از CSS استفاده می‌کنید یکسری چالش و مشکل کلی بوجود می‌آید که در بسیاری از مواقع حتی متوجه آن‌ها نخواهید بود.

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

اشتباه اول: استفاده بیش از حد از !important

کلمه‌ کلیدی !important در CSS به شما کمک می‌کند تا اولویت اجرا یا اعمال یک دستور یا استایل به یک المان را تغییر دهید. برای مثال اگر المانی با کلاس .main_title در دو بخش از فایل style.css استایل‌دهی شود، اولویت با آن مقداری خواهد بود که دارای کلمه کلیدی !important است. در غیر اینصورت آخرین استایل اعمال می‌شود.

شیوه استفاده از این دستور به شکل زیر است:

selector {
 property: value !important;
}

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

در چه زمانی می‌توانیم از !important استفاده کنیم؟

• در صورتی که به فایل اصلی استایل دسترسی ندارید و می‌خواهید استایل‌های سفارشی ایجاد کنید.
• زمانی که بعد از اعمال تغییرات گسترده نتوانستید استایل مورد نظر را اعمال کنید به عنوان آخرین راه‌حل می‌توانید از این گزینه استفاده کنید.
• در زمان تست و دیباگ کدهای CSS و نمایش سریع کدهایی که قصد اعمال کردن‌شان را دارید می‌توانید از این دستور استفاده کنید.

اشتباه دوم: استفاده از واحدهای ثابت یا Absolute Unit

استفاده از واحدهای اندازه‌گیری درست یکی از کلیدی‌ترین موضوعات برای ایجاد یک طراحی واکنشگرا است. همانطور که می‌دانید در دنیای CSS دو نوع واحد اندازه‌گیری وجود دارد: ثابت و متغیر.

مقادیر متغیر براساس ویوپورت یا اندازه صفحه کاربر (اندازه صفحه مرورگر) خودشان را تطبیق می‌دهند. اما مقادیر ثابت در هر صفحه‌ای یک اندازه ثابت داشته و تغییر نخواهند کرد. بنابراین فونت ۱۴ در کامپیوتر به چه اندازه‌ای نشان داده شود در محیط موبایل نیز به همان میزان نمایش داده خواهد شد که این در نتیجه برای واکنشگرایی وبسایت نمره منفی تلقی می‌شود.

در سرفصل «واحدها و سایزها» دوره رایگان آموزش CSS به صورت تمام و کمال با این واحدها و کاربردهای آن آشنا خواهید شد.

اشتباه سوم: استفاده از استایل‌دهی Inline

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

• رویکرد استایل‌دهی برخط باعث می‌شود که شما نتوانید قاعده DRY یا Don’t Repeat Yourself را دنبال کنید. به این معنا که اصلی‌ترین هدف CSS یعنی آبشاری بودن را نابود می‌کنید.
• خواندن کدها بسیار پیچیده شده و حجم فایل HTML را بسیار افزایش می‌دهد.
• ایجاد تغییر در استایل المان‌ها بسیار سخت می‌شود. از آنجایی که همه چیز از طریق فایل HTML صورت می‌گیرد و این فایل در فرایند Inline Styling بسیار بزرگ شده ایجاد تغییر در کدهای اعمال شده سخت است.

بنابراین حتما سعی کنید از روش‌های دیگر CSSنویسی یعنی استایل‌دهی داخلی یا خارجی استفاده کنید.

اشتباه چهارم: استفاده نکردن از CSS Reset

مرورگرهای مختلف یکسری استایل پیشفرض به صفحات وب می‌دهند که تمام استایل‌ها براساس همان استایل پایه اعمال می‌شود. برای اینکه دقیق‌ترین حالت از استایل‌نویسی را تجربه کنید حتما از یک CSS Reset استفاده کنید. این فایل CSS باعث می‌شود که تمام استایل‌های از پیش موجود حذف شود.

Normalize.css یک ابزار کاربردی برای ایجاد CSS Reset است که می‌توانید از آن استفاده کنید.

اشتباه پنجم: در نظر نگرفتن سازگاری با مرورگرها

زمانی که از یک ویژگی تازه CSS استفاده می‌کنید این موضوع را در نظر بگیرید که امکان دارد برخی از مرورگرها از آن پشتیبانی نکنند. بنابراین همواره یکسری از مرورگرهای مطرح مانند کروم، موزیلا و اج را در نظر بگیرید و با آن‌ها وبسایت‌تان را تست کنید. در صورتی که هر کدام از این مرورگرها نتوانند وبسایت یا المان منحصر به فردی از وبسایت را به خوبی نمایش دهند نیاز است که سریعا آن را تغییر دهید یا به فکر Vendor Prefixها باشید.

اشتباه ششم: استفاده از نام رنگ‌ها

استفاده کردن از نام رنگ‌ها در CSS یکی از اشتباهاتی‌ست که باعث غیر دقیق بودن رنگ‌ها می‌شود. نام رنگ‌ها در CSS محدود بوده و شامل تمامی رنگ‌های مورد نظر نمی‌شود به همین دلیل از سیستم رنگ‌دهی Hex استفاده می‌شود (RGB).

مطمئن شوید که در هنگام رنگ دهی به المان‌های‌تان از این سیستم رنگ‌دهی استفاده می‌کنید و دقیقا همان کد رنگی را انتخاب کنید که می‌خواهید.

آموزش طراحی صفحات وب و CSS

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

همچنین اگر قصد دارید به صورت تمام و کمال با CSS آشنا شده و آن را یاد بگیرید حتما از دوره رایگان CSS استفاده کنید. در این دوره سعی شده تا به صورت کامل شما را با CSS آشنا کنیم.

در پایان

CSS یکی از اساسی‌ترین تکنولوژی‌های حوزه وب است و دانستن آن برای تمام طراحان وب الزامی‌ست. حتما به یاد داشته باشید که شما در عمل می‌توانید به خوبی با چالش‌های این زبان آشنا شوید و در نتیجه سعی کنید از اشتباهات مرسوم دوری کنید.

در این مطلب از وبسایت راکت ما شما را با ۶ اشتباه مرسومی که بیشتر توسعه دهندگان CSS انجام می‌دهند آشنا کردیم.