CSS Academy · درس

تنظيم الملفات: نمطا ITCSS و7-1

نظّم ملفات CSS باستخدام نمط المثلث المقلوب أو نمط 7-1 للمشاريع القابلة للتوسع

تنظيم الملفات: نمطا ITCSS و7-1 درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

لماذا ننظم ملفات CSS؟

مع نمو المشاريع، يصبح ملف CSS واحدًا صعب الإدارة. وتساعد بنى تنظيم الملفات الفرق على تقسيم CSS إلى طبقات منطقية تُحمّل بالترتيب الصحيح ويسهل التنقل بينها.

ITCSS: CSS على شكل مثلث مقلوب

تنظم ITCSS CSS في طبقات مرتبة حسب درجة التخصيص المتزايدة. وكالمثلث المقلوب، تكون القواعد الأوسع والأكثر عمومية في الأعلى، بينما توجد القواعد الأكثر تخصيصًا في الأسفل. ويحترم ذلك التتابع الطبيعي.

طبقات ITCSS

طبقات ITCSS السبع (من الأكثر عمومية إلى الأقل عمومية):

Settings — المتغيرات ورموز التصميم
Tools — المزائج والدوال
Generic — إعادة الضبط والتوحيد
Elements — الأنماط الأساسية لعناصر HTML
Objects — تجريدات التخطيط (من دون مظهر)
Components — مكونات واجهة المستخدم
Utilities — التجاوزات والمساعدات، ويُسمح باستخدام !important هنا

بنية ملفات ITCSS

تخطيط نموذجي لملفات ITCSS:

  <pre class="file-tree">src/styles/
  01-settings/
    _colors.scss
    _typography.scss
    _spacing.scss
  02-tools/
    _mixins.scss
  03-generic/
    _reset.scss
  04-elements/
    _headings.scss
    _links.scss
  05-objects/
    _container.scss
    _media.scss
  06-components/
    _button.scss
    _card.scss
  07-utilities/
    _text-align.scss
    _display.scss</pre>

نمط 7-1

ينظم نمط 7-1 Sass في 7 مجلدات وملف رئيسي واحد يستورد كل شيء:

abstracts/ — المتغيرات والدوال والمزائج
base/ — إعادة الضبط والطباعة والعناصر الأساسية
components/ — الأزرار والبطاقات والنوافذ المنبثقة
layout/ — الرأس والتذييل والشريط الجانبي والشبكة
pages/ — الأنماط الخاصة بالصفحات
themes/ — السمات المتعددة
vendors/ — CSS التابعة لجهات خارجية

ملف الإدخال الرئيسي

يستورد ملف main.scss الرئيسي جميع الملفات الجزئية بالترتيب:

  <pre class="file-tree">@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'base/reset';
@use 'base/typography';
@use 'components/button';
@use 'components/card';
@use 'layout/header';</pre>

طبقات CSS (@layer) للتنظيم

توفر @layer في CSS الحديثة الفوائد نفسها لترتيب التتابع التي توفرها ITCSS، من دون معالج مسبق. وتُعلن الطبقات مرة واحدة، وتظل أولويتها ثابتة بغض النظر عن ترتيبها في المصدر.

  <div class="card text-primary">Layered card text</div>

الوضع بجوار المكوّن مقابل التنظيم المركزي

بديل لملفات الأنماط المركزية هو وضع CSS الخاصة بالمكوّن بجوار ملف المكوّن. وهذا شائع في مشاريع React وVue التي تستخدم CSS Modules أو CSS-in-JS.

تسمية الملفات الجزئية في Sass

تبدأ الملفات الجزئية في Sass بشرطة سفلية (_button.scss). وتشير الشرطة السفلية إلى أن Sass لا يترجم الملف بصورة مستقلة، بل يجب استيراده في ملف رئيسي.

PostCSS كبديل

إذا لم تستخدموا Sass، فيمكن لـ PostCSS مع إضافة @import أو لـ CSS الأصلية باستخدام @import مع @layer تحقيق تنظيم الملفات نفسه من دون معالج مسبق.

ملفات CSS الخاصة بالمكونات

سواء استخدمتم ITCSS أو نمط 7-1 أو الملفات الموضوعة بجوار المكونات، ينبغي أن يكون لكل مكوّن ملفه الخاص. سمّوا الملف باسم المكوّن الذي ينسّقه: _card.scss، button.css، Nav.module.css.

تحقق سريع

في ITCSS، ما الطبقة الموجودة في أعلى المثلث المقلوب تمامًا (الأوسع والأقل تخصيصًا)؟

مراجعة

ترتب ITCSS طبقات CSS من العامة إلى الأكثر تخصيصًا باتباع التتابع. وينظم نمط 7-1 Sass في 7 مجلدات تُستورد عبر ملف رئيسي واحد. وتوفر @layer في CSS الحديثة التحكم نفسه في التتابع بصورة أصلية. وسواء كان التنظيم مركزيًا أو بجوار المكونات، فالمبدأ الأساسي هو: ملف واحد لكل مكوّن، واستيرادات مرتبة باستمرار.

الأسئلة الشائعة

هل درس «تنظيم الملفات: نمطا ITCSS و7-1» مجاني؟

نعم — نص درس «تنظيم الملفات: نمطا ITCSS و7-1» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «تنظيم الملفات: نمطا ITCSS و7-1»؟

نظّم ملفات CSS باستخدام نمط المثلث المقلوب أو نمط 7-1 للمشاريع القابلة للتوسع تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «تنظيم الملفات: نمطا ITCSS و7-1»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy