قبل از هر چیز یک مرجع مرتبط را ببینید: توضیح تگ details در HTML. در این مقاله قدمبهقدم یاد میگیریم چگونه دستورات CSS را بهصورت صحیح، ساختاریافته و سئو-فرندلی بنویسیم. اگر دنبال آموزش مرتب و پروژهمحور هستید، در مقدمه حتماً به دوره آموزش CSS سر بزنید.
مبانی نوشتن قواعد CSS
قواعد CSS از سه بخش اصلی تشکیل میشوند: selector (انتخابکننده)، بلوک declaration و هر property: value; داخل بلوک. ساختار پایه:
selector {
property: value;
}انواع selectorها و نکات نوشتن آنها
انواع رایج selectorها:
| نوع | توضیح |
|---|---|
| عنصر (element) | مثال: p یا h1 |
| کلاس (class) | مثال: .card — مناسب برای استایل کامپوننتها |
| آیدی (id) | مثال: #header — برای المان یکتا |
| پیوندها و ترکیبی | مثال: .nav a:hover یا selectorهای اختصاصیتر |
قواعد نگارشی و بهترین شیوهها
- از BEM یا سیستم نامگذاری مشابه برای خوانایی و نگهداری بهتر استفاده کنید.
- هر قانون را کوتاه و متمرکز نگه دارید؛ یک کلاس یک مسئولیت داشته باشد.
- از CSS Variables برای مقادیر تکراری (رنگ، فاصله، اندازه فونت) استفاده کنید.
- ترتیب نوشتن: reset/normalize → base → layout → components → utilities.
- همیشه از واحدهای مناسب (px, rem, em, %, vw/vh) استفاده کنید؛ برای فونت عمومی از
remاستفاده شود.
نمونههای عملی و الگوهای متداول
نمونه تعریف دکمه با الگوی مرتب و قابل بازاستفاده:
.btn {
display: inline-block;
padding: 0.6rem 1rem;
border-radius: 6px;
background-color: var(--main-color);
color: #fff;
text-decoration: none;
transition: background-color 0.2s ease;
}
.btn:hover {
background-color: hsl(210, 60%, 40%);
}کامنتگذاری و مستندسازی در CSS
هر قطعهکد مهم را با کامنت مستند کنید تا نگهداری تیمی سادهتر شود. مثال:
/* Component: Card
Usage: .card .title
Notes: responsive padding, uses --card-bg */
.card { ... }جدول نکات شایع و راهحلها
| مشکل رایج | راهحل |
|---|---|
| عدم اعمال استایل | بررسی specificity، مسیر صحیح فایل در href و وجود !important |
| بزرگ بودن فایل CSS | تقسیم به فایلهای منطقی و minify در مرحله build |
| مسائل responsive | استفاده از media queries، واحدهای نسبی و توابع min()/max()/clamp() |
ابزارها و روند توسعه
برای سرعت و کیفیت توسعه از ابزارهایی مانند Prettier (فرمتینگ)، Stylelint (لینتینگ) و bundlerهایی مثل Vite یا Webpack استفاده کنید. در محیط توسعه از sourcemap و در پروडकشن از نسخه minified فایلها بهره ببرید.
ادامه آموزش
برای نمونههای بیشتر و دورههای پروژهمحور حتماً دوره آموزش CSS را مشاهده کنید. در مقاله بعدی به صورت اختصاصی نحوه نوشتن توضیحات (Comments) در CSS را بررسی میکنیم تا مستندسازی و خوانایی کد بهبود یابد.
آموزش قبلی: آموزش و یادگیری نحوه ایجاد فایل CSS
آموزش بعدی: آموزش و یادگیری نحوه نوشتن توضیحات در CSS
دیدگاه و پرسش