قواعدی برای نوشتن CSS خوب

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

مسیر [یا راه‌حل‌] های مستقیم زیادی در CSS وجود ندارد. با راه‌های متعدد برای دستیابی به مفاهیم یکسان، یافتن راه‌حلی که برای شما جدید باشد و همچنین دانستن اینکه آیا این راه‌حل درست یا بهترین رویکرد است، دشوار می‌باشد. اگر “بستگی دارد” عبارت مشخصه [یا پرکاربرد] یک برنامه‌نویس باتجربه است، CSS قطعاً زبانی است که برای پر کردن این فضای خالی در قلب یک توسعه‌دهنده باتجربه نوشته شده است.

پپر کردن شکاف دانش در مورد اینکه چه زمانی و در کجا از چه چیزی استفاده کنیم ممکن است سخت باشد، اما همین ویژگی است که این زبان را زیبا می‌کند، CSS کاملا قوی و توانمند است زیرا خاصیت‌ها و مقادیر منحصر به فرد (individual declarations) می‌‌توانند بطور پیچیده‌ای با هم ترکیب شوند و یک سمفونی زیبا از سبک (style) و چیدمان (layout) ایجاد کنند.

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

قواعد CSS

بعنوان کسی که به دانش‌آموزان و توسعه‌ دهنده‌های تازه‌ کار (junior) CSS آموزش دادم، قبول کنید یا نه اینها برخی از قواعدی است که ایجاد کرده‌ام و فکر می‌کنم در نوشتن CSS خوب از همان روز اول به شما کمک کند.

از کدهایی که نیاز نیست استفاده نکنید

خیلی واضحه؟ شاید نباشه! اغلب لازم است چیزهایی را آزمایش کنید – از آن نترسید! اما آزمایش‌های ناموفق را فوراً پاک کنید. هنگامی که اجازه دهید چیزی غیر ضروری در کد باقی بماند، هیچ کس در آینده نمی تواند به راحتی تشخیص دهد که آن چیز لازم است یا نه – حتی خود شما!

از کامنت‌ها استفاده کنید

به طور خاص، گاهی اوقات لازم است مقداری CSS بنویسید که بطور کامل در مورد اینکه چرا به آن نیاز دارید مطمئن نیستید. این یک موقعیت عالی برای بیان این تردید در یک کامنت است، هم برای شما و هم برای کسی که در آینده کد را بررسی می کند. در حالی که دلایل خوب دیگری برای استفاده از کامنت‌ها وجود دارد، افزودن اطلاعات اضافه در خصوص یک راه‌حل، فرصت‌هایی را برای بازبینی مجدد و تلاش برای اصلاح و بهبود کدها ایجاد می‌کند. همچنین می‌تواند نقاطی را نشان دهد که ممکن است بعداً باگ‌هایی که ردیابی آنها دشوار (tough-to-track) است ظاهر شوند.

از انتخابگرهای Id برای CSS پرهیز کنید

ویژگی آبشار (cascade) [یا سلسله مراتب] را درک کنید. در انجام این کار، متوجه خواهید شد که یکی از مفاهیم اصلی، مهارت در مدیریت ارجحیت یا specificity در کد است. و به بدین منظور انتخابگر Id آنقدر قوی است که نمی توان به استفاده از آن عادت کرد. برای کسب اطلاعات بیشتر در این مورد صحبت اخیر Mayank را به شدت توصیه می‌کنم.

از important! استفاده نکنید

ویژگی important با مدیریت درست ارجحیت یا specificity مرتبط است و می‌تواند ماهیت کلی کد را نمایش دهد. البته موقعیت‌های محدودی برای استفاده از این ویژگی وجود دارد مانند کدهایی که به ارث رسیده اند یا قدیمی‌تر هستند. اگر مجبور به استفاده از این ویژگی هستید مطمئنا مشکلی در جای دیگر کد وجود دارد؛ قبل از اینکه استفاده از این ویژگی را راه‌حل نهایی در نظر بگیرید صبر کنید و به دنبال مشکل بگردید.

یک سیستم برای سازگاری (consistency) داشته باشید

هیچ سیستمی بد نیست و نصف سیستم هم یک سیستم است. نامگذاری، ساختار (structure)، انتخاب، متغییرها، تودرتو نویسی (nesting) و مشخص کردن محدوده (scoping)، موارد زیادی در CSS وجود دارد که سازگاری سیستماتیک باعث می‌شود کد شما قابل بازبینی و نگهداری باشد. یک سیستم از هر نوعی داشته باشید، آن را مستند کنید و از آن استفاده کنید. اینکه از چه سیستمی باید استفاده کنید، به شما بستگی دارد. کاری را انجام دهید که منطقی است. از BEM تا CUBE و یا یک سیستم سفارشی، گزینه‌های زیادی وجود دارد.

بازنشانی‌ها (resets) و پیش فرض‌ها (defaults) مفید هستند

در رابطه با سیستم سازی، یک بازنشانی خوب می تواند برخی از پیچیدگی های قدیمی را هنگام شروع با CSS حذف کند. توصیه می‌کنم ایده‌های بازنشانی مدرن Andy Bell و Josh Comeau را بررسی کنید.

پیش فرض‌ها شبیه به بازنشانی‌ها هستند، اما می توانند به چند روش هوشمندانه استفاده شوند. مقادیر پیش فرض را بصورت سراسری (global) تعریف کنید. اینها می توانند بعنوان بازگشت‌های هوشمند (smart fallbacks) در سیستم شما استفاده شوند. اما همچنین می‌تواند پیش‌فرض‌هایی را برای مواردی که نباید فراموش کنید تعریف کند، یک مثال کلاسیک انتخاب و اعمال یک بوردر برای تمام تصاویری است که ویژگی alt برای آنها تعریف نشده است:

img:not([alt]) {
  border: 5px solid red;
}

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

ساختار کد را درک کنید

این ممکن است مختص کار بصورت گروهی باشد، اما مهم است که زمانی را صرف خواندن و یادگیری کدهایی کنید که در پروژه نمی‌نویسید. هماهنگ کردن سبک کدنویسی و ابزارهایی که استفاده می‌کنید با سیستم موجود برای حفظ انسجام کد ضروری است. قبل از اینکه به سمت مشارکت در ایجاد کامپوننت‌ها و استایل‌های خود حرکت کنید، بازنشانی، کلاس‌های کاربردی (utility classes)، متغییرهای گلوبال CSS، تایپوگرافی، رنگ‌ها و سیستم‌های فاصله‌گذاری را بشناسید.

به شدت روی متغیرهای CSS تکیه کنید

متغیرهای CSS فقط برای کاهش دادن نیاز به تایپ کردن نیستند. متغیرهای CSS را طوری تنظیم کنید که انگار در حال جمع آوری ابزارهای خود برای پیاده سازی طراحی خود هستید. “من می دانم که به این رنگ‌ها، background ها، مقادیر و غیره نیاز دارم”، این کار موجب تشکیل یک API منسجم می‌شود که نشان دهنده سبک خاص چیزی است که در حال ساخت آن هستید. در بیشتر موارد می‌توانید به راحتی مقادیر را تغییر دهید و استایل و چیدمان (layout) را سفارشی کنید.

ابتدا نیازمندی‌های ریسپانسیو طرح را بررسی کنید

قبل از نوشتن CSS به خصوص موارد مرتبط با چیدمان (layout) به خوبی طراحی را بررسی کنید. این ضروری است که درک درستی از نحوه عملکرد چیزی که قصد دارید بسازید در حالت ریسپانسیو داشته باشید. درک واضح از حالت ریسپانسیو به راه حل های CSS تمیزتر، ظریف تر و متفکرانه تر منجر می شود. برعکس [این حالت] تلاش برای اعمال تغییرات روی layout پس از ایجاد یک اندازه خاص می‌تواند منجر به راه‌حل‌های شکننده و موقتی شود.

از margin در کامپوننت‌ها و padding در نگهدارنده‌ها (containers) استفاده نکنید

من عضو باشگاه “margin هرگز” نیستم، اما با برخی از آن نکات [آنها] موافقم. margin از این جهت خاص است که اغلب تعاریف فاصله بین آیتم ها را نشان می‌دهد. زمانی که حالت خاصی از یک کامپوننت را که هنوز زمینه (context) مشخصی ندارد را استایل دهی می‌کنید بهتر است قبل از تعریف margin صبر کنید تا زمینه نهایی کامپوننت مشخص شود.

به طور مشابه، در استایل دادن به چیزی که قرار است چیز ناشناخته دیگری را در خود جای دهد (contain) یا در آن قرار گیرد (slot)، مراقب باشید خود را به یک مجموعه خاص از padding محدود نکنید تا بتوان آن [نگهدارنده] را در جاهای مختلف به طور مناسب تعریف کرد.

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

کد CSS را کپی نکنید

بایستی روی این موضوع تاکید کنم به خصوص برای توسعه دهندگان تازه‌ کار، هرگز کد CSS را کپی نکنید. استفاده از ابزار Co-pilot برای CSS؟ نه. استایل‌های آماده Figma برای CSS؟ نه. همه آن استایل‌های جالب را از کامپوننت شخص دیگری بگیرید؟ خیر.

آیا می توانید همه این موارد را یاد بگیرید؟ بله! کاملا! اما در مقابل نسبت به تمایل به کپی کردن بخش‌های بزرگ CSS مقاومت کنید زیرا نوشتن هر یک از تعریف‌های خاصیت (property)، هم شما را به توسعه‌دهنده CSS بهتری تبدیل می‌کند و هم مغز شما را به گونه‌ای درگیر می‌کند که به شما امکان می‌دهد همیشه انتخاب‌های واضح و قابل فهمی در مورد کدی که می‌نویسید داشته باشید.

جمع بندی

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

این پست ترجمه مقاله Opinions for Writing Good CSS از Andrew Walpole می‌باشد، اگه به این پست علاقه داشتید پیشنهاد می‌کنم پست چه زمانی از ویژگی Nesting یا تودرتو نویسی در CSS استفاده کنیم؟ را که در خصوص بهینه سازی کدهای CSS هست مشاهده کنید.