وقتی که سی‌اس‌اس را یاد می‌گیرید و مدتی با آن کار می کنید، متوجه می شوید که کمی با سازمان‌دهی به کدهای‌تان مشکل دارید. سی‌اس‌اس برای سازمان دهی از یک روش ذاتی به اسم «آبشار» استفاده می کند. در این حالت وقتی هرچیزی را می‌نویسید، مواردی که بعد از آن می‌آید ممکن است از کدهای اولیه تاثیر بگیرند، در حقیقت این ویژگی برای هر کدی که بعد از کد دیگری بیاید وجود دارد. البته این موضوع براساس کارهایی بود که ما برای ساخت یک وبسایت ایستا و کوچک در سال ۱۹۹۸ – ۲۰۰۰ انجام می‌دادیم.
خب در هر حال آن روزها گذشت.
البته اشتباه نکنید، حالت آبشاری هنوز وجود دارد و هنوز به قدرتمندی سال‌های گذشته است. تنها فرقی که حال دارد این است که کمی طراحی پیچیده تر شده. توسعه دهندگان فرانت اند معمولا برای پروژه های منحصر به فرد هزاران خط کد سی‌اس‌اس می نویسند. سازمان‌دهی کردن و نگه داری کردن از این همه کد وظیفه بسیار بزرگ و مهمی است. به همین خاطر توسعه دهندگان تصمیم گرفته اند تا برای سازمان یافته نگه داشتن کدها سیستم‌هایی را از ابتدا ایجاد کنند و یا اینکه از اپلیکیشن‌ها برای چنین کاری بهره بگیرند.
در هر حال برای استفاده از ابزارها نیز شما به مواردی نیاز دارید. شاید نوشتن یک فایل سی‌اس‌اس بزرگ برای پروژه نمونه کار خود یا یک پروژه دیگر به خوبی کار کند، اما واقعیت آن است که همیشه نیاز نیست که همه چیز تا این حد پیچیده باشد.
۱- از یک پیش‌پردازنده سی‌اس‌اس استفاده کنید
تقریبا در تمام پیشنهادات و راهنماها برای سازمان یافته نگه داشتن کدها، از این مرحله شروع می کنند، این مسئله نیز دلیل بسیار خوبی دارد: با استفاده از این حالت می توانید یک فایل بسیار بزرگ سی‌اس‌اس را داشته باشید، بله مطمئنا یادم هست که در بالا چه چیزی گفتم، اما به ادامه توجه کنید. با افزایش تعداد فایل‌های سی‌اس‌اس و لینک دادن آنها به فایل اصلی وبسایت، تعداد درخواست‌های HTTP شما افزایش پیدا می کند و این مسئله سرعت را تا حدی کاهش می‌دهد. استفاده از قاعده @import در سی‌اس‌اس نیز تقریبا چنین مشکلی بوجود می‌آورد.
با استفاده از پیش‌پردازنده‌ها شما می توانید هر تعداد فایل و پوشه سی‌اس‌اس را داشته باشید و به صورت جدا از هم آنها را مدیریت کنید، اما در نهایت پیش پردازنده فایل های شما را در یک فایل بزرگ قرار داده و تحویل مرورگر می‌دهد.
در حال حاضر معروف‌ترین و محبوب‌ترین پیش‌پردازنده Sass است که پیشنهاد می کنم برای پروژه بعدی‌تان از آن استفاده نمایید، تا متوجه شوید که به چه میزان کارهای شما را ساده‌تر می کند.
۲- فایل‌های سی‌اس‌اس برای برگه‌های منحصر به فرد
یک نکته مفید برای وبسایت‌های کوچک: سعی کنید برای هر صفحه‌ای از وبسایت، از فایل سی اس اس جداگانه‌ای استفاده کنید. این موضوع مخصوصا وقتی که صفحاتتان دارای لایه بندی متفاوتی از همدیگر است بسیار حائز اهمیت است. در این حالت وقتی می خواهید قسمت مشخصی را ویرایش کنید، نیازی ندارید که در میان صفحات بسیار و سردرگم کننده جستجو کنید و فایل بزرگ سی‌اس‌اس را ویرایش نمایید. برای مثال: می‌خواهید روی صفحه «About.html» کار کنید؟ کافی‌ست که فایل About.css را باز نمایید.
۳- فایل‌های سی‌اس‌اس برای اجزای پیچیده و تکراری
این موضوع برای هر دو وبسایت‌های کوچک و وبسایت های بزرگ کار می کند. اگر شما چیزی را دارید که پیچیده است -برای مثال می توان به اسلایدشو روی صفحه خانگی اشاره کرد- بهتر است که فایل سی‌اس‌اس اختصاصی برای آن ایجاد نمایید. کدهای سی‌اس‌اس را در فایلی که صفحه خانگی‌تان قرار دارد، قرار ندهید. این مسئله می تواند برای المان‌های دیگر صفحه نیز مورد استفاده قرار بگیرد، برای مثال هدر، فوتر، گالری تصاویر و موارد دیگر.
این مسئله تنها به سازمان دهی کردن کدها ارتباط ندارد بلکه وقتی استایل‌های مختلف را از همدیگر جدا و به صورت مجزا قرار میدهید، استفاده مجدد از آن ها به مراتب ساده‌تر و آسان‌تر می شود.
۴- تا جایی که می‌توانید بشکنید
کدنویسی سی‌اس‌اس برای وبسایت‌های پیچیده و بزرگ (به یک فروشگاه یا یک شبکه اجتماعی فکر کنید) بسیار سخت است. کدنویسی این موارد در یک تیم، می تواند مورد دیگری باشد. وقتی در چنین حالتی قرار می‌گیرید، دنیای بسیار بزرگتری از افکار طراحی برای شما نمایان می شود. این روش که من درباره آن حرف می‌زنم طراحی اتمی است.
در این طراحی المان‌ها به پنج دسته تقسیم می شوند:
- اتم‌ها
- مولکول‌ها
- ارگان‌ها
- قالب‌ها
- برگه‌ها
اتم‌ها به صورت فردی می توانند اشاره‌ای داشته باشند به المان‌هایی مانند دکمه‌ها، ورودی‌های متنی و موارد دیگر. در این مثال مولکول می تواند یک فرم باشد که حاوی یکسری ورودی و دکمه‌های مختلف است. ارگان‌ها نیز مجموعه‌ای بزرگ‌تر از مولکول‌هاست، برای مثال می توان به هدر وبسایت اشاره کرد و… .
این موارد چگونه به سی‌اس‌اس مرتبط می شوند؟ شما می توانید در کدنویسی سی‌اس‌اس به این حالت توجه کنید: ابتدا روی اتم‌ها تمرکز کنید. بعد از آن برای قالب‌های پایه استایل‌های منحصر به فرد داشته باشید. بعد از آن استایلی برای تایپوگرافی. و همینطور به جلو. در نهایت متوجه خواهید شد از همین حالت سلسله مراتب بسیار ساده، چیزی پیچیده و ترکیبی ساخته اید.
۵- از Class-itis اجتناب کنید
Class-itis چیست؟ یکی از چیزهای عجیبی که توسعه‌دهندگان مدام استفاده می کنند و خیلی عجیب است این است که از حالت class= attribute استفاده کنند (این حالت را در style=attrubute مشاهده می‌کنیم). این حالت را می‌توانید در کدهای زیر مشاهده کنید:
<div class="red-bg corners-rounded-5px columns-3 height-flexible helpme icantgoonlikethis">[Insert content here]</div>این حالت بسیار بد است و مطمئنا چنین ویژگی را در برخی از فریمورک‌های معروف مشاهده کرده‌اید. جدای از آن هیچ اهمیتی ندارد که از چه صفتی استفاده می کنید، یکی از ویژگی های بد استفاده از حالت style=attribute در اچ‌تی‌ام‌ال است، این موضوع وقتی وبسایت‌تان بزرگ‌تر و بزرگ‌تر شود بسیار معضل بزرگی خواهد شد.
۶- عمق‌ها را کوچک نمایید
منظور از این قضیه چیست؟ همیشه سعی کنید که از کلاس‌های کمتری استفاده کنید، این موضوع کمک می کند که کدهای خواناتر و بهتری داشته باشید. در غیر اینصورت با چنین کدی مواجه خواهید شد:
header nav ul, footer nav ul, aside div ul {margin-top: 1rem;}این موضوع علاوه بر پیچیده شدن کد سی‌اس‌اس ممکن است باعث شود تا روی موارد دیگری نیز تاثیر بگذارید. برای اجتناب کردن از این حالت بهتر است که راه حل زیر را امتحان کنید:
.molecule-nav {margin-top: 1rem;}همانطور که می‌بینید در کدهای بالا یک بالانس بسیار متوازن در بین استفاده از کلاس‌ها رعایت شده است.
در پایان
مطمئنا مرتب کردن و تمرکز داشتن روی اینکه بهترین و مرتب‌ترین حالت کد را بنویسید آن هم در حین یک ایجاد یک پروژه کار سختی است. اما این کار باعث می‌شود تا بعدا بتوانید بسیار بهتر با کدها تعامل برقرار کنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید