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

 

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

در ادامه به معرفی و بررسی 10 روش برای مدیریت کد های CSS که باعث میشود کدنویسی تمیزی داشته باشیم میپردازیم:

1- همیشه از SASS یا هر پیش پردازنده(preprocessor) دیگر CSS استفاده کنید.

اگر امکان دارد از SASS استفاده کنید. ویژگی های فوق العاده ای مانند تو در تو کردن (nesting)، تعریف متغیر و mixin ها را دارد. می توانید از nesting برای چیزهای مختلفی در کدنویسی استفاده کنید: مثلا برای اجزای سازنده، متغیر برای رنگ هایتان و mixin ها، تا از ویژگی های وحشتناک وابسته به مرورگر، دوری کنید. (Bourbon ،mixin های زیادی دارد که می توانید از آن ها استفاده کنید.)

HTML -2 خود را پیش از CSS بنویسید

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

3- اجزای کد CSS خود را با مدل BEM مرتب کنید

BEM بهترین راه را برای مدیریت کدهای CSS به شما ارائه می دهد. این نوع کدنویسی ممکن است هنگامی که به ضمیمه های جدیدی در صفحه مواجه شدید، به کمکتان بیاید.

4- کدهای خوانا بنویسید.

دو نوع قالب بندی در CSS به چشم می خورد. بعضی کدنویس ها تمام دستورات را در یک خط جای می دهند. مانند قطعه کد CSS زیر:

1- نوع اول که قابل قبول است

box { background-color: #567895; }

H2 {  background-color: black; color: white; }

نوع دوم که کدنویس ها هر چیزی را در یک سطر جدید قرار می دهند:

.box {

   background-color: #567895;

}


h2 {

   background-color: black;

   color: white;
}

نحوه ی کدنویسی شما برای CSS اهمیتی ندارد. اما این که هر بخش را در سطر جدیدی بنویسید، کد را خوانا تر می کند.

5- در کدنویسی از کامنت استفاده کنید

افزودن کامنت به CSS می تواند به افرادی که در آینده با فایل شما کار می کنند، و هنگامی که خودتان پس از مدتی به پروژه بر می گردید کمک کند.(قطعه کد زیر مثالی از کامنت کردن است)

/* This is a CSS comment

It can be broken onto multiple lines. */

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

ID -6 ها را در CSS مرجع قرار ندهید.

برای این که انتخابگر ها بسیار خاص هستند و ممکن است به دستور !important منجر شوند که اصلا دوست داشتنی نیست چرا که ساختار های مهم را می شکند.

7- از دستور های راهنمای CSS  گیت هاب استفاده کنید.

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

8- به هر قیمتی از !important دوری کنید.

احتمالا دلیل آن را می دانید اما تنها برای یادآوری، !important تنها باید برای نادیده گرفتن ویژگی های CSS استفاده شود که توسط کتابخانه های خارجی HTML گیر کرده اند.

9- فقط در صورت نیاز از bootstrap استفاده کنید

همچنین بهتر است پیش استفاده از bootstrap مطمئن شوید که آن را درک کرده اید.

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

HTML -10 خود را خوانا و ساده نگه دارید

HTML شما نباید عنصرهای غیر ضروری داشته باشد. گاهی برنامه نویس ها دوست دارند بعضی از تگ ها را درون دیگری قرار دهند، درحالی که نیازی به این کاری نیست. همیشه تلاش کنید سلسله مراتب را تا حد امکان ساده کنید و از تگ های HTML که بیشترین تطابق را با محتوایتان دارد، استفاده کنید. اینگونه اگر CSS بارگیری نشود، کاربر حداقل می تواند سازماندهی پایه ی صفحه را مشاهده کند.

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