مرتب سازی css

اگر به پکیج ها و کتابخونه های معروف نگاه کرده باشید متوجه میشید که حرفه ای ترین روش استفاده از CSS preprocessor هاست که معروف ترین و بهترینش هم scss هست. با استفاده از این روش خیلی راحت میتونید از قابلیت هایی که در اختیارتون قرار میدن مثل import کردن، استفاده از متغیرها و یا ساختن mixin و ... استفاده کنید.

فرض کنید سایت از سه صفحه اصلی هوم پیج، درباره ما و ارتباط با ما تشکیل شده. میتونید استایل های هر یک از این سه صفحه رو به شکل زیر داشته باشید:

homepage.scss
about_us.scss
contact_us.scss

و بعد داخل فایل app.scss همه شون رو import میکنید و در نهایت فقط همین یک فایل هست که در html تون قرار میدید.

@import "homepage.scss"
@import "about_us.scss"
@import "contact_us.scss"

// other styles...

البته این صرفا یک ساختار ساده و پیشنهادی هست و میتونید بر حسب نیاز و سلیقه خودتون پیاده سازی کنید. فقط نکته اش اینه که برای استفاده، فایل app.css باید کامپایل بشه. چون مرورگر فقط فرمت css رو میشناسه و scss برای شماست. ابزارهای مختلفی برای اینکار وجود داره و کمی جستجو بکنید بهش میرسید.

چندتا مقاله آموزشی زیر هم برای شروع خدمت شما:
https://roocket.ir/articles/what-is-sass
https://roocket.ir/articles/whats-so-great-about-sass
https://www.w3schools.com/sass/default.asp