Summarize this content to 400 words in Persian Lang
در دنیای در حال توسعه توسعه وب، CSS (Cascading Style Sheets) نقش مهمی در ایجاد رابط های بصری جذاب و کاربر پسند ایفا می کند. اما، همانطور که پروژه ها در مقیاس بزرگ هستند، مدیریت CSS می تواند به یک کار دلهره آور تبدیل شود. معماری‌های CSS را وارد کنید – روش‌هایی که ساختار و قابلیت نگهداری را به پایگاه‌های کد CSS می‌آورند. در این مقاله چندین متدولوژی CSS محبوب را بررسی خواهیم کرد، چرا آنها ضروری هستند و چگونه می توان آنها را به طور موثر اعمال کرد.
آشنایی با متدولوژی های CSS
متدولوژی های CSS دستورالعمل ها و الگوهایی برای نوشتن و سازماندهی کد CSS هستند. هدف آنها حل مسائل مشترک مانند تضادهای ویژگی، قراردادهای نامگذاری و مقیاس بندی پیچیدگی ها است. در اینجا مروری کوتاه بر برخی از متدولوژی های CSS پرکاربرد آورده شده است:
BEM (تغییرگر عنصر بلوک)
OOCSS (CSS شی گرا)
SMACSS (معماری مقیاس پذیر و مدولار برای CSS)
CSS اتمی
ITCSS (مثلث معکوس CSS)
چرا از متدولوژی های CSS استفاده کنیم؟
قابلیت نگهداری: CSS با ساختار مناسب خواندن، اشکال زدایی و نگهداری آسان تر است.
مقیاس پذیری: روش‌ها مدیریت پایگاه‌های کد بزرگ را تسهیل می‌کنند.
ثبات: یک سبک کدگذاری یکنواخت را در سراسر تیم تضمین می کند.
قابلیت استفاده مجدد: نوشتن اجزای قابل استفاده مجدد را تشویق می کند و افزونگی را کاهش می دهد.
قابل پیش بینی بودن: تاثیر تغییرات را قابل پیش بینی تر می کند و عوارض جانبی غیرمنتظره را به حداقل می رساند.
BEM (تغییرگر عنصر بلوک)
BEM یکی از محبوب ترین قراردادهای نامگذاری CSS است. مخفف Block، Element، Modifier است و روشی ساختاریافته برای نامگذاری کلاس ها ارائه می دهد.
➡️ همچنین می‌توانید مقاله شگفت‌انگیز من را در مورد مقدمه همه قراردادهای نامگذاری موجود بررسی کنید.
اصول
مسدود کردن: یک موجودیت مستقل را نشان می دهد که به تنهایی معنادار است (به عنوان مثال، menu).
عنصر: نمایانگر بخشی از یک بلوک است و معنای مستقلی ندارد (به عنوان مثال، menu__item).
اصلاح کننده: حالت یا نسخه دیگری از یک بلوک یا عنصر را نشان می دهد (به عنوان مثال، menu__item–active).
مثال
HTML
class=”menu”>
class=”menu__item menu__item–active”>Home
class=”menu__item”>About
class=”menu__item”>Contact
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
فواید
نام کلاس های قابل پیش بینی: درک رابطه بین کلاس ها آسان است.
مسائل با ویژگی کم: احتمال تضاد ویژگی را کاهش می دهد.
قابلیت استفاده مجدد: استفاده مجدد از قطعات را تسهیل می کند.
OOCSS (CSS شی گرا)
OOCSS بر ایجاد کد قابل استفاده مجدد و قابل گسترش با جداسازی ساختار و پوسته اجزاء تمرکز دارد.
اصول
ساختار و پوست جدا: سبک های ساختاری و بصری را جداگانه تعریف کنید.
ظرف و محتوا را جدا کنید: ظرف نباید وابسته به محتوا باشد.
مثال
HTML
class=”card”>
class=”card__header”>Title
class=”card__body”>Content
class=”card__footer”>Footer
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
ساختار پوشه
/css
/components
_card.scss
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
فواید
قابلیت استفاده مجدد: استفاده مجدد از سبک های بصری و عناصر ساختاری را تشویق می کند.
مقیاس پذیری: مدیریت آسان تر با رشد پروژه ها.
SMACSS (معماری مقیاس پذیر و مدولار برای CSS)
SMACSS یک رویکرد انعطاف پذیر است که CSS را به پنج نوع طبقه بندی می کند: Base، Layout، Module، State و Theme.
اصول
پایه: سبک های پیش فرض مانند بازنشانی.
چیدمان: سبک هایی که طرح بندی ساختاری اصلی صفحه را مشخص می کنند.
مدول: سبک برای اجزای قابل استفاده مجدد.
حالت: سبک های حالت های مختلف ماژول ها یا طرح بندی ها.
موضوع: سبک هایی برای موضوعات مختلف سایت.
مثال
HTML
class=”layout-header”>
class=”logo”>MySite
class=”module-card is-active”>
class=”module-card__title”>Card Title
class=”module-card__content”>Card Content
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
ساختار پوشه
/css
/base
_reset.scss
/layout
_header.scss
/module
_card.scss
/state
_active.scss
/theme
_dark-theme.scss
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
فواید
مدولار بودن: تفکیک نگرانی ها را تشویق می کند.
مقیاس پذیری: با پروژه های بزرگ مقیاس خوبی دارد.
ثبات: ساختاری ثابت در سراسر پروژه ارائه می دهد.
CSS اتمی
Atomic CSS یک رویکرد کاربردی است که در آن هر کلاس به یک ویژگی CSS مربوط می شود.
اصول
مسئولیت واحد: هر کلاس یک مسئولیت دارد (مثلاً text-center، m-1).
کلاس های کاربردی: مجموعه ای از کلاس های کاربردی برای ساخت کامپوننت ها استفاده می شود.
مثال
HTML
class=”text-center m-1 p-2 bg-primary”>
Welcome to Atomic CSS
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
ساختار پوشه
/css
/utilities
_typography.scss
_spacing.scss
_colors.scss
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
فواید
کارایی: اندازه فایل های CSS را با استفاده مجدد از کلاس ها کاهش می دهد.
سادگی: ساده و قابل فهم.
انعطاف پذیری: بسیار انعطاف پذیر و آسان برای انطباق.
ITCSS (مثلث معکوس CSS)
ITCSS یک معماری مقیاس پذیر و قابل نگهداری است که CSS را از عمومی به خاص سازماندهی می کند.
اصول
عمومی به خاص: سبک ها از عمومی به خاص سفارش داده می شوند.
لایه های: به لایه هایی مانند تنظیمات، ابزارها، عمومی، عناصر، اشیاء، مؤلفه ها و ابزارها تقسیم می شود.
مثال
HTML
class=”btn”>
class=”btn__text”>Click Me
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
ساختار پوشه
/css
/settings
_variables.scss
/tools
_mixins.scss
/generic
_normalize.scss
/elements
_typography.scss
/objects
_grid.scss
/components
_buttons.scss
/utilities
_spacing.scss
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
فواید
مقیاس پذیری: برای پروژه های بزرگ مناسب است.
قابلیت نگهداری: ساختار و سازماندهی واضح.
انعطاف پذیری: سازگاری و گسترش آسان.
👉 شما می توانید بیش از یک معماری را در پروژه خود بکار ببرید. به عنوان مثال استفاده کنید BEM _برای نامگذاری بهتر، _SMACSS _برای سازماندهی بهتر و _Atomic CSS برای رسیدگی بهتر!
خلاصه و نتیجه گیری
معماری های CSS برای حفظ شیوه نامه های تمیز، مقیاس پذیر و کارآمد در توسعه وب بسیار مهم هستند. هر روش مزایای منحصر به فردی را به همراه دارد و انتخاب روش مناسب به نیازهای پروژه و ترجیحات تیم بستگی دارد. چه نامگذاری قابل پیش‌بینی BEM، رویکرد مدولار SMACSS یا CSS اتمی مبتنی بر ابزار، اتخاذ یک متدولوژی CSS می‌تواند به طور قابل توجهی روند توسعه را بهبود بخشد و جادوی CSS را حتی جذاب‌تر کند. برای نوشتن CSS بهتر و قابل نگهداری تر و لذت بردن از سمفونی هماهنگ سبک های خوش معماری، از این روش ها استفاده کنید.
-در پایان از شما تشکر می کنم که مقاله من را خواندید و روز خوبی داشته باشید!
در دنیای در حال توسعه توسعه وب، CSS (Cascading Style Sheets) نقش مهمی در ایجاد رابط های بصری جذاب و کاربر پسند ایفا می کند. اما، همانطور که پروژه ها در مقیاس بزرگ هستند، مدیریت CSS می تواند به یک کار دلهره آور تبدیل شود. معماری‌های CSS را وارد کنید – روش‌هایی که ساختار و قابلیت نگهداری را به پایگاه‌های کد CSS می‌آورند. در این مقاله چندین متدولوژی CSS محبوب را بررسی خواهیم کرد، چرا آنها ضروری هستند و چگونه می توان آنها را به طور موثر اعمال کرد.
آشنایی با متدولوژی های CSS
متدولوژی های CSS دستورالعمل ها و الگوهایی برای نوشتن و سازماندهی کد CSS هستند. هدف آنها حل مسائل مشترک مانند تضادهای ویژگی، قراردادهای نامگذاری و مقیاس بندی پیچیدگی ها است. در اینجا مروری کوتاه بر برخی از متدولوژی های CSS پرکاربرد آورده شده است:
- BEM (تغییرگر عنصر بلوک)
- OOCSS (CSS شی گرا)
- SMACSS (معماری مقیاس پذیر و مدولار برای CSS)
- CSS اتمی
- ITCSS (مثلث معکوس CSS)
چرا از متدولوژی های CSS استفاده کنیم؟
- قابلیت نگهداری: CSS با ساختار مناسب خواندن، اشکال زدایی و نگهداری آسان تر است.
- مقیاس پذیری: روش‌ها مدیریت پایگاه‌های کد بزرگ را تسهیل می‌کنند.
- ثبات: یک سبک کدگذاری یکنواخت را در سراسر تیم تضمین می کند.
- قابلیت استفاده مجدد: نوشتن اجزای قابل استفاده مجدد را تشویق می کند و افزونگی را کاهش می دهد.
- قابل پیش بینی بودن: تاثیر تغییرات را قابل پیش بینی تر می کند و عوارض جانبی غیرمنتظره را به حداقل می رساند.
BEM (تغییرگر عنصر بلوک)
BEM یکی از محبوب ترین قراردادهای نامگذاری CSS است. مخفف Block، Element، Modifier است و روشی ساختاریافته برای نامگذاری کلاس ها ارائه می دهد.
➡️ همچنین می‌توانید مقاله شگفت‌انگیز من را در مورد مقدمه همه قراردادهای نامگذاری موجود بررسی کنید.
اصول
-
مسدود کردن: یک موجودیت مستقل را نشان می دهد که به تنهایی معنادار است (به عنوان مثال،
menu). -
عنصر: نمایانگر بخشی از یک بلوک است و معنای مستقلی ندارد (به عنوان مثال،
menu__item). -
اصلاح کننده: حالت یا نسخه دیگری از یک بلوک یا عنصر را نشان می دهد (به عنوان مثال،
menu__item--active).
مثال
HTML
class="menu">
class="menu__item menu__item--active">Home
class="menu__item">About
class="menu__item">Contact
فواید
- نام کلاس های قابل پیش بینی: درک رابطه بین کلاس ها آسان است.
- مسائل با ویژگی کم: احتمال تضاد ویژگی را کاهش می دهد.
- قابلیت استفاده مجدد: استفاده مجدد از قطعات را تسهیل می کند.
OOCSS (CSS شی گرا)
OOCSS بر ایجاد کد قابل استفاده مجدد و قابل گسترش با جداسازی ساختار و پوسته اجزاء تمرکز دارد.
اصول
- ساختار و پوست جدا: سبک های ساختاری و بصری را جداگانه تعریف کنید.
- ظرف و محتوا را جدا کنید: ظرف نباید وابسته به محتوا باشد.
مثال
HTML
class="card">
class="card__header">Title
class="card__body">Content
class="card__footer">Footer
ساختار پوشه
/css
/components
_card.scss
فواید
- قابلیت استفاده مجدد: استفاده مجدد از سبک های بصری و عناصر ساختاری را تشویق می کند.
- مقیاس پذیری: مدیریت آسان تر با رشد پروژه ها.
SMACSS (معماری مقیاس پذیر و مدولار برای CSS)
SMACSS یک رویکرد انعطاف پذیر است که CSS را به پنج نوع طبقه بندی می کند: Base، Layout، Module، State و Theme.
اصول
- پایه: سبک های پیش فرض مانند بازنشانی.
- چیدمان: سبک هایی که طرح بندی ساختاری اصلی صفحه را مشخص می کنند.
- مدول: سبک برای اجزای قابل استفاده مجدد.
- حالت: سبک های حالت های مختلف ماژول ها یا طرح بندی ها.
- موضوع: سبک هایی برای موضوعات مختلف سایت.
مثال
HTML
class="layout-header">
class="logo">MySite
class="module-card is-active">
class="module-card__title">Card Title
class="module-card__content">Card Content
ساختار پوشه
/css
/base
_reset.scss
/layout
_header.scss
/module
_card.scss
/state
_active.scss
/theme
_dark-theme.scss
فواید
- مدولار بودن: تفکیک نگرانی ها را تشویق می کند.
- مقیاس پذیری: با پروژه های بزرگ مقیاس خوبی دارد.
- ثبات: ساختاری ثابت در سراسر پروژه ارائه می دهد.
CSS اتمی
Atomic CSS یک رویکرد کاربردی است که در آن هر کلاس به یک ویژگی CSS مربوط می شود.
اصول
-
مسئولیت واحد: هر کلاس یک مسئولیت دارد (مثلاً
text-center،m-1). - کلاس های کاربردی: مجموعه ای از کلاس های کاربردی برای ساخت کامپوننت ها استفاده می شود.
مثال
HTML
class="text-center m-1 p-2 bg-primary">
Welcome to Atomic CSS
ساختار پوشه
/css
/utilities
_typography.scss
_spacing.scss
_colors.scss
فواید
- کارایی: اندازه فایل های CSS را با استفاده مجدد از کلاس ها کاهش می دهد.
- سادگی: ساده و قابل فهم.
- انعطاف پذیری: بسیار انعطاف پذیر و آسان برای انطباق.
ITCSS (مثلث معکوس CSS)
ITCSS یک معماری مقیاس پذیر و قابل نگهداری است که CSS را از عمومی به خاص سازماندهی می کند.
اصول
- عمومی به خاص: سبک ها از عمومی به خاص سفارش داده می شوند.
- لایه های: به لایه هایی مانند تنظیمات، ابزارها، عمومی، عناصر، اشیاء، مؤلفه ها و ابزارها تقسیم می شود.
مثال
HTML
class="btn">
class="btn__text">Click Me
ساختار پوشه
/css
/settings
_variables.scss
/tools
_mixins.scss
/generic
_normalize.scss
/elements
_typography.scss
/objects
_grid.scss
/components
_buttons.scss
/utilities
_spacing.scss
فواید
- مقیاس پذیری: برای پروژه های بزرگ مناسب است.
- قابلیت نگهداری: ساختار و سازماندهی واضح.
- انعطاف پذیری: سازگاری و گسترش آسان.
👉 شما می توانید بیش از یک معماری را در پروژه خود بکار ببرید. به عنوان مثال استفاده کنید BEM _برای نامگذاری بهتر، _SMACSS _برای سازماندهی بهتر و _Atomic CSS برای رسیدگی بهتر!
خلاصه و نتیجه گیری
معماری های CSS برای حفظ شیوه نامه های تمیز، مقیاس پذیر و کارآمد در توسعه وب بسیار مهم هستند. هر روش مزایای منحصر به فردی را به همراه دارد و انتخاب روش مناسب به نیازهای پروژه و ترجیحات تیم بستگی دارد. چه نامگذاری قابل پیش‌بینی BEM، رویکرد مدولار SMACSS یا CSS اتمی مبتنی بر ابزار، اتخاذ یک متدولوژی CSS می‌تواند به طور قابل توجهی روند توسعه را بهبود بخشد و جادوی CSS را حتی جذاب‌تر کند. برای نوشتن CSS بهتر و قابل نگهداری تر و لذت بردن از سمفونی هماهنگ سبک های خوش معماری، از این روش ها استفاده کنید.
-در پایان از شما تشکر می کنم که مقاله من را خواندید و روز خوبی داشته باشید!
