تصویر محمدعلی اکبری

SMACSS مجموعه قوانینی در مورد ساختار فایل ها، تقدم و تاخیر قوانین، نحوه نام گذاری انتخابگرها و ابزارهای جدید در مورد CSS است. این مبحث حاصل تجربیات کهنه کاری با نام Jonathan Snook در صدها پروژه طراحی و پیاده سازی می باشد.

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

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

1. دسته بندی قوانین

برنامه نویسی واسط کاربری نیز نیازمند ساختار مناسب است

1.1. قوانین پایه (base)

مجموعه قوانین که به المان های اصلی (single element selectors)، شبه انتخابگرها (pseudo-class)، انتخابگرهای ویژگی (attribute selectors) و انتخابگرهای فرزندی و خویشآوندی (child selectors or sibling selectors) اعمال می شود.

html, body, form { margin: 0; padding: 0; }
input[type=text] { border: 1px solid #999; }
a { color: #039; }
a:hover { color: #03C; }

1.2. چیدمان (Layout)

تقسیم بندی صفحه به قسمت های مختلف توسط این قوانین انجام می گیرد. ممکن است برای این منظور از چهارچوبهایی مانند 960.gs یا Skeleton استفاده شود.

1.3. ماژول ها (Module)

قوانینی که معمولا به صورت تکراری مورد استفاده قرار می گیرد. به عنوان مثال لیست محصولات و ظاهر بلوک ها.

1.4. وضعیت (State)

قوانینی که ظاهر بخش های قالب را در وضعیت های مختلف تعیین می کنند. به عنوان مثال ظاهر یک مازول در تبلت یا موبایل متفاوت است. و یا با کلیک بر روی گزینه ای یک ماژول تغییر ظاهر می دهد.

1.5. قالب (Theme)

همانند قوانین وضعیت بیانگر ظاهر ماژول ها و بخش های مختلف هستند.

افزودن نظر جدید