بنية SASS: ITCSS و SMACSS

بينما نمط 7-1 ممتاز لتنظيم ملفات SASS، هناك منهجيات معمارية أخرى تتعامل مع تنظيم CSS من وجهات نظر مختلفة. في هذا الدرس الشامل، سنستكشف ITCSS (Inverted Triangle CSS) و SMACSS (Scalable and Modular Architecture for CSS)، نهجان قويان لإدارة CSS على نطاق واسع.

فهم ITCSS (Inverted Triangle CSS)

ITCSS، التي أنشأها Harry Roberts، هي منهجية تنظم CSS بناءً على الخصوصية والوصول. يتم تصورها كمثلث مقلوب، حيث تتدفق الأنماط من عامة إلى صريحة، ومن خصوصية منخفضة إلى خصوصية عالية.

المبدأ الأساسي

ITCSS تستند إلى فكرة أن CSS يجب تنظيمها في طبقات، حيث كل طبقة لها:

• الوصول: إلى أي مدى تؤثر الأنماط على DOM (واسع إلى ضيق)
• الخصوصية: مدى تحديد المحددات (منخفضة إلى عالية)
• الوضوح: مدى وضوح التنسيق (عام إلى صريح)

الطبقات السبع لـ ITCSS

ITCSS تقسم CSS الخاص بك إلى سبع طبقات متميزة، كل منها بغرض محدد:

scss/
├── 1-settings/           # متغيرات عامة، إعدادات
│   ├── _colors.scss
│   ├── _typography.scss
│   └── _spacing.scss
├── 2-tools/              # Mixins ودوال
│   ├── _mixins.scss
│   └── _functions.scss
├── 3-generic/            # إعادة التعيين والتطبيع
│   ├── _reset.scss
│   └── _box-sizing.scss
├── 4-elements/           # عناصر HTML مجردة
│   ├── _headings.scss
│   ├── _links.scss
│   └── _forms.scss
├── 5-objects/            # أنماط التخطيط (OOCSS)
│   ├── _container.scss
│   ├── _layout.scss
│   └── _media.scss
├── 6-components/         # مكونات واجهة المستخدم
│   ├── _buttons.scss
│   ├── _cards.scss
│   └── _navigation.scss
└── 7-utilities/          # فئات مساعدة
    ├── _spacing.scss
    ├── _text.scss
    └── _display.scss

الطبقة 1: الإعدادات

متغيرات عامة وتكوين. لا يوجد ناتج CSS في هذه الطبقة.

// لوحة الألوان - لا يتم توليد CSS
$color-brand-primary: #0066cc;
$color-brand-secondary: #ff6600;
$color-ui-success: #28a745;
$color-ui-error: #dc3545;
$color-ui-warning: #ffc107;

// تدرج الرمادي
$color-gray-100: #f8f9fa;
$color-gray-200: #e9ecef;
$color-gray-300: #dee2e6;
$color-gray-800: #343a40;
$color-gray-900: #212529;

// تعيين لون دلالي
$color-text-primary: $color-gray-900;
$color-text-secondary: $color-gray-800;
$color-background: #ffffff;
$color-border: $color-gray-300;

// وحدة المسافة الأساسية
$spacing-unit: 8px;

// مقياس المسافات
$spacing-scale: (
    "xs": $spacing-unit * 0.5,    // 4px
    "sm": $spacing-unit,           // 8px
    "md": $spacing-unit * 2,       // 16px
    "lg": $spacing-unit * 3,       // 24px
    "xl": $spacing-unit * 4,       // 32px
    "xxl": $spacing-unit * 6       // 48px
);

// نقاط الانقطاع
$breakpoints: (
    "sm": 576px,
    "md": 768px,
    "lg": 992px,
    "xl": 1200px
);

الطبقة 2: الأدوات

Mixins والدوال وأدوات SASS الأخرى. لا يوجد ناتج CSS.

// Mixin متجاوب
@mixin respond-above($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
        $value: map-get($breakpoints, $breakpoint);
        @media (min-width: $value) {
            @content;
        }
    }
}

// حجم الخط مع ارتفاع السطر
@mixin font-size($size, $line-height: null) {
    font-size: $size;
    @if $line-height {
        line-height: $line-height;
    }
}

// اقتطاع النص مع علامة الحذف
@mixin truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

الطبقة 3: عامة

أنماط القاعدة مثل إعادة التعيين والتطبيع. أول طبقة تولد CSS فعلي.

// إعادة تعيين CSS حديثة
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
    line-height: 1.5;
}

img,
picture,
svg {
    display: block;
    max-width: 100%;
}

الطبقة 4: العناصر

أنماط عناصر HTML المجردة (بدون فئات). خصوصية منخفضة.

// عناصر العناوين
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: $color-text-primary;
}

h1 { @include font-size(2.5rem); }
h2 { @include font-size(2rem); }
h3 { @include font-size(1.75rem); }
h4 { @include font-size(1.5rem); }
h5 { @include font-size(1.25rem); }
h6 { @include font-size(1rem); }

// عناصر الرابط
a {
    color: $color-brand-primary;
    text-decoration: underline;
    transition: color 0.2s ease;

    &:hover {
        color: darken($color-brand-primary, 15%);
    }

    &:focus {
        outline: 2px solid $color-brand-primary;
        outline-offset: 2px;
    }
}

الطبقة 5: الكائنات

محددات قائمة على الفئات تحدد أنماط التخطيط (مبادئ OOCSS). أنماط تصميم هيكلية خالية من التجميل.

// كائن الحاوية - يوسط ويقيد المحتوى
.o-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: map-get($spacing-scale, "md");
    padding-right: map-get($spacing-scale, "md");

    &--fluid {
        max-width: none;
    }

    &--narrow {
        max-width: 800px;
    }
}

// كائن التخطيط - نظام تخطيط مرن
.o-layout {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(map-get($spacing-scale, "md") * -0.5);

    &__item {
        padding: 0 calc(map-get($spacing-scale, "md") * 0.5);
    }

    &--center {
        justify-content: center;
    }

    &--space-between {
        justify-content: space-between;
    }

    &--align-center {
        align-items: center;
    }
}

// كائن الوسائط - صورة بجانب نص
.o-media {
    display: flex;
    align-items: flex-start;

    &__img {
        margin-right: map-get($spacing-scale, "md");
        flex-shrink: 0;
    }

    &__body {
        flex: 1;
    }

    &--reverse {
        flex-direction: row-reverse;

        .o-media__img {
            margin-right: 0;
            margin-left: map-get($spacing-scale, "md");
        }
    }
}

الطبقة 6: المكونات

مكونات واجهة المستخدم الكاملة والمصممة. هنا يعيش معظم تنسيقك.

// مكون الزر
.c-button {
    display: inline-block;
    padding: map-get($spacing-scale, "sm") map-get($spacing-scale, "md");
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;

    &--primary {
        background-color: $color-brand-primary;
        color: white;

        &:hover {
            background-color: darken($color-brand-primary, 10%);
        }
    }

    &--secondary {
        background-color: $color-brand-secondary;
        color: white;

        &:hover {
            background-color: darken($color-brand-secondary, 10%);
        }
    }

    &--outline {
        background-color: transparent;
        border-color: $color-brand-primary;
        color: $color-brand-primary;

        &:hover {
            background-color: $color-brand-primary;
            color: white;
        }
    }

    &--large {
        padding: map-get($spacing-scale, "md") map-get($spacing-scale, "lg");
        @include font-size(1.125rem);
    }

    &--small {
        padding: map-get($spacing-scale, "xs") map-get($spacing-scale, "sm");
        @include font-size(0.875rem);
    }
}

الطبقة 7: الأدوات المساعدة

فئات مساعدة بخصوصية عالية. هذه تتجاوز كل شيء آخر ويجب أن تكون غير قابلة للتغيير.

// أدوات المسافات
@each $name, $value in $spacing-scale {
    // أدوات الهامش
    .u-m-#{$name} { margin: $value !important; }
    .u-mt-#{$name} { margin-top: $value !important; }
    .u-mr-#{$name} { margin-right: $value !important; }
    .u-mb-#{$name} { margin-bottom: $value !important; }
    .u-ml-#{$name} { margin-left: $value !important; }

    // أدوات الحشو
    .u-p-#{$name} { padding: $value !important; }
    .u-pt-#{$name} { padding-top: $value !important; }
    .u-pr-#{$name} { padding-right: $value !important; }
    .u-pb-#{$name} { padding-bottom: $value !important; }
    .u-pl-#{$name} { padding-left: $value !important; }
}

// أدوات النص
.u-text-center { text-align: center !important; }
.u-text-left { text-align: left !important; }
.u-text-right { text-align: right !important; }

.u-text-truncate { @include truncate; }

.u-text-uppercase { text-transform: uppercase !important; }
.u-text-lowercase { text-transform: lowercase !important; }
.u-text-capitalize { text-transform: capitalize !important; }

// أدوات الألوان
.u-text-primary { color: $color-brand-primary !important; }
.u-text-secondary { color: $color-text-secondary !important; }
.u-text-success { color: $color-ui-success !important; }
.u-text-error { color: $color-ui-error !important; }

فهم SMACSS

SMACSS (Scalable and Modular Architecture for CSS)، التي أنشأها Jonathan Snook، هي منهجية تصنف قواعد CSS إلى خمسة أنواع. على عكس ITCSS، التي تركز على الخصوصية، SMACSS تركز على التصنيف واصطلاحات التسمية.

الفئات الخمس لـ SMACSS

scss/
├── base/                 # قواعد أساسية
│   ├── _reset.scss
│   └── _typography.scss
├── layout/               # قواعد التخطيط
│   ├── _header.scss
│   ├── _sidebar.scss
│   └── _grid.scss
├── module/               # قواعد الوحدات (المكونات)
│   ├── _button.scss
│   ├── _card.scss
│   └── _navigation.scss
├── state/                # قواعد الحالة
│   ├── _is-active.scss
│   ├── _is-hidden.scss
│   └── _is-collapsed.scss
└── theme/                # قواعد الثيم
    ├── _light.scss
    └── _dark.scss

1. القواعد الأساسية

القواعد الأساسية تحدد التنسيق الافتراضي لعناصر HTML. بدون فئات أو معرفات.

// الطباعة الأساسية - محددات العناصر فقط
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.2;
}

p {
    margin-bottom: 1em;
}

a {
    color: #0066cc;
    text-decoration: none;
}

2. قواعد التخطيط

قواعد التخطيط تقسم الصفحة إلى أقسام. بادئة l- أو layout-.

// قواعد التخطيط - بادئة l-
.l-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;

    &__logo {
        font-size: 1.5rem;
        font-weight: bold;
    }

    &__nav {
        display: flex;
        gap: 2rem;
    }
}

.l-sidebar {
    width: 250px;
    padding: 1.5rem;
    background-color: #f5f5f5;

    @media (max-width: 768px) {
        width: 100%;
    }
}

.l-main {
    flex: 1;
    padding: 2rem;
}

3. قواعد الوحدات (المكونات)

الوحدات هي مكونات قابلة لإعادة الاستخدام ومعيارية. تشكل غالبية CSS الخاص بك.

// قواعد الوحدات - مكونات مستقلة
.card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;

    &-header {
        padding: 1rem 1.5rem;
        background-color: #f8f9fa;
        border-bottom: 1px solid #e0e0e0;
    }

    &-title {
        margin: 0;
        font-size: 1.25rem;
    }

    &-body {
        padding: 1.5rem;
    }

    &-footer {
        padding: 1rem 1.5rem;
        background-color: #f8f9fa;
        border-top: 1px solid #e0e0e0;
    }

    // متغيرات الوحدة
    &--featured {
        border-color: #0066cc;
        border-width: 2px;
    }

    &--compact {
        .card-body {
            padding: 1rem;
        }
    }
}

4. قواعد الحالة

قواعد الحالة تصف كيف تبدو الوحدات أو التخطيطات في حالات معينة. بادئة is- أو has-.

// قواعد الحالة - بادئة is- أو has-
.is-hidden {
    display: none !important;
}

.is-visible {
    display: block !important;
}

.is-active {
    background-color: #0066cc;
    color: white;
}

.is-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.is-loading {
    position: relative;
    pointer-events: none;

    &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px;
        border: 2px solid #0066cc;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
    }
}

.has-error {
    border-color: #dc3545;
    background-color: #fff5f5;
}

.has-success {
    border-color: #28a745;
    background-color: #f0fff4;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

5. قواعد الثيم

قواعد الثيم تصف كيف قد تبدو الوحدات أو التخطيطات مع ثيمات مختلفة.

// قواعد الثيم
.theme-dark {
    background-color: #1a1a1a;
    color: #e0e0e0;

    .card {
        background-color: #2a2a2a;
        border-color: #3a3a3a;
        color: #e0e0e0;

        &-header,
        &-footer {
            background-color: #222;
            border-color: #3a3a3a;
        }
    }

    .l-header {
        background-color: #222;
        border-color: #3a3a3a;
    }

    a {
        color: #66b3ff;
    }
}

مقارنة 7-1 و ITCSS و SMACSS

نمط 7-1

• الأفضل لـ: الفرق المألوفة مع SASS، المشاريع المتوسطة إلى الكبيرة
• القوة: بنية مجلد واضحة، سهلة التنقل
• منحنى التعلم: منخفض - تنظيم مباشر
• الفلسفة: تنظيم الملفات حسب الغرض

ITCSS

• الأفضل لـ: المشاريع الكبيرة مع العديد من المطورين، تطبيقات المؤسسات
• القوة: إدارة الخصوصية، يمنع التعارضات
• منحنى التعلم: متوسط - يتطلب فهم الخصوصية
• الفلسفة: التنظيم حسب الخصوصية والوصول

SMACSS

• الأفضل لـ: المشاريع التي تحتاج تصنيف واضح، ثيمات CMS
• القوة: اصطلاحات تسمية واضحة، إدارة الحالة
• منحنى التعلم: منخفض-متوسط - فئات بسيطة
• الفلسفة: التصنيف حسب نوع القاعدة

اختيار البنية الصحيحة

فكر في 7-1 عندما:

• فريقك جديد على بنية CSS
• تريد بنية مجلد بسيطة وبديهية
• حجم المشروع صغير إلى متوسط

فكر في ITCSS عندما:

• تعارضات الخصوصية مصدر قلق رئيسي
• لديك قاعدة كود كبيرة ومعقدة جداً
• فرق متعددة تعمل على نفس الأنماط
• تريد قواعد تنظيم صارمة

فكر في SMACSS عندما:

• تحتاج إدارة حالة واضحة
• بناء ثيمات أو منتجات ذات علامة بيضاء
• العمل مع CMS أو محتوى ديناميكي
• تريد اصطلاحات تسمية مرنة

الجمع بين المنهجيات

العديد من المشاريع الناجحة تجمع عناصر من منهجيات متعددة:

scss/
├── settings/          # من ITCSS
├── tools/             # من ITCSS
├── generic/           # من ITCSS
├── base/              # من SMACSS
├── layout/            # من SMACSS
├── objects/           # من ITCSS (أنماط OOCSS)
├── components/        # من 7-1 (أو وحدات من SMACSS)
├── state/             # من SMACSS
├── utilities/         # من ITCSS
└── themes/            # من 7-1 و SMACSS

الخلاصة

في هذا الدرس، استكشفت بنى SASS المتقدمة. أنت الآن تفهم:

• نهج المثلث المقلوب لـ ITCSS بناءً على الخصوصية
• الطبقات السبع لـ ITCSS من الإعدادات إلى الأدوات المساعدة
• الفئات الخمس لـ SMACSS: Base، Layout، Module، State، Theme
• اصطلاحات التسمية في SMACSS (بادئات l-، is-، has-)
• كيفية مقارنة 7-1 و ITCSS و SMACSS
• متى تستخدم كل منهجية
• كيفية الجمع بين المنهجيات للنهج الهجينة
• أفضل الممارسات لاختيار البنية بناءً على احتياجات المشروع

البنية الصحيحة تعتمد على مشروعك وفريقك وأهدافك. فهم هذه المنهجيات يمنحك الأدوات لاتخاذ قرارات مستنيرة وبناء CSS قابل للتوسع وسهل الصيانة لأي حجم مشروع.