وقتی از Separation of concerns (SoC) حرف میزنیم، منظور اینه که ساختار (HTML)، ظاهر (CSS) و رفتار (JavaScript) رو قاطی نکنیم. این کار باعث میشه کد راحت تر نگهداری بشه، سریع تر دیباگ بشه و تو پروژه های بزرگ قاطی پاتی نشه.
چرا این جداسازی مهمه
اگه استایل رو قاطی تگ ها کنی، هم اصول On page سئو رو رعایت نکردی و هم بعدا هر تغییری بخوای بدی باید کل فایل ها رو بگردی. ولی وقتی CSS جداست، فقط یه فایل رو دستکاری میکنی. همین موضوع تو مستندات رسمی هم همیشه تاکید شده.
روش های استایل دهی و نکات مهم
1. Inline Style استفاده از style="" مستقیم روی تگ.
سریع و دم دستی، ولی نگهداریش افتضاحه. فقط برای تست لحظه ای خوبه.
<p style="color: red;">Hello</p>
2. Internal CSS
استفاده از <style> داخل <head>.
برای صفحات کوچیک اوکیه، ولی تو پروژه های واقعی بهتره نری سمتش.
<style>
p { color: red; }
</style>
3. External CSS (بهترین روش)
فایل جدا مثل styles.css. تمیزترین و استانداردترین روش.
<link rel="stylesheet" href="styles.css">
نکات مهم و پرتکرار
- همیشه از کلاس استفاده کن، نه استایل مستقیم.
- اسم کلاس ها رو معنی دار بذار، نه عجیب غریب.
- از
id برای استایل دهی استفاده نکن، چونSpecificity رو بیخودی بالا میبره. (بعدا در مورد این یه یادداشت می نویسم) - از
!important فقط وقتی مجبور شدی استفاده کن، نه برای حل هر مشکلی. - ساختار
HTML بایدsemantic باشه تاCSS راحت تر مدیریت بشه. - تو پروژه های بزرگ از معماری هایی مثل
BEM استفاده کن تا کلاس ها قابل پیش بینی باشن.
یه مثال کوچیک و تمیز
<!-- HTML --> <button class="btn primary">Save</button>
/* CSS */
.btn {
padding: 8px 16px;
border-radius: 4px;
}
.btn.primary {
background: blue;
color: white;
}
اگه ساختار، استایل و رفتار رو جدا نگه داری، هم خودت راحت تری هم پروژه تمیزتر میمونه. همیشه برو سمت External CSS و از کلاس های قابل فهم استفاده کن تا بعدا خودت گیر نکنی.