شما در حال راه اندازی یک برنامه وب جدید برای شرکت خود هستید. این یک برنامه کاربردی بزرگ خواهد بود که برای سالهای آینده حفظ و گسترش خواهد یافت. تیم توسعه بزرگی وجود خواهد داشت. با گذشت زمان، اکثر توسعه دهندگان اصلی، اگر نه همه، به پروژه های دیگر یا مشاغل دیگر خواهند رفت. توسعه دهندگان جدیدی که وارد پروژه می شوند باید بدون درک کل پروژه و بدون شکستن چیزی شروع به تولید کنند. چگونه CSS را برای پروژه تنظیم می کنید؟
وقتی CSS را برای یک پروژه بزرگ راه اندازی می کنید، چند هدف دارید،
- من می توانم CSS (یا هر کد دیگری برای آن موضوع!) بنویسم بدون ترس از اینکه قسمت های دیگر برنامه را خراب کنم.
- میتوانم بدون ترس از اینکه توسعهدهندگانی که روی قسمتهای دیگر پروژه کار میکنند یا توسعهدهندگانی که سال آینده استخدام میشوند، کد من را خراب کنند، CSS بنویسم.
- وقتی میخواهم قطعهای از رابط کاربری خود را کار کند، به راحتی میتوانم تمام CSS موجود را پیدا کنم که بر ظاهر آن تأثیر میگذارد. تمام آن CSS باید به طور معقولی سازماندهی شود، نه اینکه در طول پروژه در بسیاری از فایل ها پاشیده شود.
- این سیستم باید ساده و به راحتی قابل درک باشد تا مدت ها پس از ناپدید شدن تیم توسعه فعلی همچنان به کار گرفته شود.
این کار با CSS کمی مشکل است زیرا همه سبک ها جهانی هستند. برای یک توسعه دهنده بسیار آسان است که سبک جدیدی را اضافه کند که روی دیگر توسعه دهندگان و سایر صفحه نمایش ها تأثیر بگذارد. اگر صفحهای داشته باشم که دکمه قرمز دارد و آن را در یک فایل CSS در جایی بچسبانم،
این احتمال وجود دارد که من کد شخص دیگری را که دارای دکمه های قرمز رنگ است، بشکنم. یا توسعه دهنده جدیدی که یک سال بعد استخدام می کنند با دکمه قرمزش صفحه نمایش من را می شکند.
سبک های CSS جهانی را ننویسید
این مهمترین چیزی است که همه توسعه دهندگان باید بدانند. بله، نیاز به چند سبک جهانی وجود دارد که در کل پروژه اعمال شود. آنها معمولاً در مراحل اولیه پروژه نوشته می شوند. آنها باید در جایی واضح قرار داده شوند که همه آنها را ببینند. شاید آنها را در پوشه ای به نام "CSS جهانی" قرار دهید. اما هنگامی که پروژه در حال انجام است، هیچ کس نباید سبک های جهانی را لمس کند یا سبک های جدید اضافه کند مگر با احتیاط زیاد. اگر توسعهدهندهای بخواهد یک سبک جهانی جدید اضافه کند، احتمالاً باید ابتدا یک جلسه یا یک فرآیند تأیید وجود داشته باشد.
فایلهایی که شامل سبکهای سراسری شما هستند باید شامل نظری باشد که چیزی مانند «این فایل را بدون دریافت تأییدیه از معمار راهحل تغییر ندهید یا به آن اضافه نکنید».
NAMESPACES
اگر از سی شارپ، جاوا یا زبان برنامه نویسی مشابه استفاده کرده اید، با فضاهای نام آشنا هستید. فضای نام همان مشکل اساسی را حل می کند. اگر من کلاسی به نام SomeClass بنویسم و توسعه دهنده دیگری کلاسی به نام SomeClass بنویسد، درگیری ایجاد می شود. اما اگر کلاس من در MyNamespace.SomeClass و کلاس دیگر در YourNamespace.SomeClass باشد، هیچ تضادی وجود ندارد.
با CSS، ساختن چیزی مانند فضای نام آسان است. فرض کنید من روی فرمی کار می کنم که در آن کاربر تراکنش های جدیدی را وارد می کند. اولین کاری که انجام می دهم این است که کل بخش را در یک عدد بپیچم
</div>
تمام CSS هایی که برای این بخش می نویسم در فایلی با همین نام، newTransactionEntryForm.css قرار می گیرد. (اگر از SASS استفاده می کنید، آن را newTransactionEntryForm.scss می نامند.)