مقدمة إلى ITCSS لمطوري الويب

هناك عدد قليل من الأساليب الرائعة ل هيكلة كود CSS, وكلهم يعملون بطرق مختلفة. الأكثر شعبية هي OOCSS و SMACSS ، ولكن هناك أيضًا طريقة أقل شهرة تسمى ITCSS (مثلث مقلوب CSS) التي أنشأتها هاري روبرتس.

انها ليست مكتبة أو إطار عمل ، ولكن أ منهجية كتابة التعليمات البرمجية هذا قابل للتطوير وسهل التلاعب به. فوائد ITCSS تتراوح من منظمة رمز بسيط لأحجام الملفات الصغيرة ، وفهم أكبر لهندسة CSS.

ITCSS ليس للجميع ، لكنه يوفر طريقة احترافية للنظر في أوراق الأنماط بوضوح أثناء عملية الترميز. دعنا نتعمق في المفاهيم الكامنة وراء ITCSS ، ونرى كيف يمكن تطبيقها على مشاريع الويب.

ما هو ITCSS?

الطرق الحديثة لتنظيم CSS غالباً ما تعود إلى البنيوية أو كائنات CSS لبناء الأفكار المجردة.

فكرة جديدة من مثلث مقلوب المغلق هو طريقة الطبقات لتقسيم خصائص CSS بناء على مستوى خصوصيتها وأهميتها. إنها طريقة أقل شهرة مقارنة بـ SMACSS و OOCSS - على الرغم من أنه يمكن دمج كلاهما مع ITCSS.

منذ ITCSS هو معظمهم من الملكية, لا يوجد كتاب قواعد مفصل حول استخدامه. فقط مجموعة من المبادئ المحددة هو تحت تصرفنا. يتحدث المؤلف عنهم في الفيديو أدناه.

بشكل افتراضي ، يستخدم ITCSS نفس مبادئ OOCSS لكن مع فصل أكبر بناء على الخصوصية. لذلك إذا كنت معتادًا على OOCSS ، فاعتبر ذلك فريدًا من نوعه بنية CSS بديلة لكي يحاول.

فيما يلي بعض أكبر مزايا استخدام ITCSS:

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

نظام ITCSS

دعنا نلقي نظرة على كيفية عمل نموذج المثلث المقلوب باستخدام الرسم التوضيحي التالي من منشور Lubos Kmetko.

تدفق اتجاهي من القمة المسطحة للمثلث المقلوب لأسفل إلى الطرف في الأسفل يرمز إلى زيادة في الخصوصية. هذه التركيز على أقل خصوصية يسهل إعادة استخدام الفصول عبر موقع عدة مرات.

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

دعنا نلقي نظرة سريعة على كل قسم من المثلث المقلوب الانتقال من الأعلى إلى الأسفل.

• الإعدادات - متغيرات وأساليب المعالج المسبق (لا يوجد خرج CSS فعلي)
• أدوات - الخلاطات والوظائف (لا يوجد خرج CSS فعلي)
• عام - إعادة تعيين CSS والتي قد تتضمن إعادة تعيين Eric Meyer أو Normalize.css أو مجموعة التعليمات البرمجية الخاصة بك
• عناصر - محددات عنصر HTML واحد بدون فئات
• شاء - فصول بنية الصفحة تتبع عادةً منهجية OOCSS
• المكونات - فصول جمالية لتصميم أي من عناصر الصفحة وجميعها (غالبًا ما يتم دمجها مع بنية فئات الكائنات)
• ينسخ - أكثر الأساليب تحديدًا لتجاوز أي شيء آخر في المثلث

كل طبقة من المثلث المقلوب يمكن أن يكون تعديلها لتناسب احتياجاتك. لذلك إذا كنت لا تستخدم معالج CSS المسبق ، فلن تحتاج إلى طبقات الإعدادات أو الأدوات.

يجب أن لا تتردد في تفسير كل قسم فرعي كما تراه مناسبا. على سبيل المثال ، يشرح Jordan Koschei كيف قام بدمج البنية والجماليات معًا في فئات الكائنات ، تاركًا القليل جدًا في قسم المكونات.

ITCSS له لا قواعد الثابت والسريع يجب أن تتبع. لا يوجد مدقق لتوافق ITCSS ، ولن يصرخ أحد في وجهك لتغيير هذا النموذج قليلاً.

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

BEM + IT = تسمية BEMIT

يعد BEM أحد أكثر أنظمة تسمية CSS شيوعًا. هذا يشير إلى Block-Element-Modifier ويتبع بناء جملة خاص جدًا.

يصف كل عنصر في BEM اصطلاح تسمية لفئات CSS:

• كتل هي فئات للعناصر الفردية التي يمكن تكرارها والوقوف وحدها.
• عناصر هي دائما جزء من كتلة
• الصفات التعريفية دائمًا تعديل كتلة أو عنصر لتغيير مظهره قليلاً (تشغيل / إيقاف ، نشط / غير نشط ، ثابت ، ثابت ، التمييز / محايد).

BEMIT هو اصطلاح التسمية التي اعتمدتها ITCSS, الذي يستعير الأفكار من BEM أثناء تنفيذ أفكار جديدة مع ITCSS.

بناء الجملة BEM تملي قواعد محددة للغاية. أدناه عينة من موقع BEM:

.النموذج  .form - theme-xmas  .form - simple  .form__input  .form__submit  .form__submit - معطل  

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

هاري يتعمق في BEMIT في منشور المدونة هذا. وصفه موجز للغاية ويوضح أن الطبيعة الحقيقية ل ITCSS هي لعب ودية مع منهجيات CSS الأخرى.

هاري يحدد مساحات الأسماء للكائنات الظهور باسم البادئات لكل اسم فئة رئيسية. أنها تنهار كما س- للكائنات, ج- للمكونات ، و ش- للأدوات المساعدة (مثل clearfix أو توسيط النص).

فيما يلي بعض نماذج الأكواد اصطلاحات تسمية BEMIT النموذجية.

  
... 
 
 

كما يوصي باستخدام @ لاحقة للفئات على أساس أنماط وسائل الإعلام. لذلك .س وسائل الإعلام قد تتغير الطبقة ل .س وسائل الإعلام @ إل جي للشاشات الكبيرة ، و .س وسائل الإعلام @ MD للشاشات متوسطة الحجم.

شخصيا ، أعتقد أن اللواحق الإضافية هي معقد للغاية لمشاريع الويب الأساسية. أعتقد أن معظم المطورين يفضلون استخدام استعلامات الوسائط الشائعة وإعادة كتابة الفئات عند نقاط توقف مختلفة. لكن لا يمكنني القول أن أي من الطريقتين صحيحة أو خاطئة ، ويمكن لأي شخص أن يقرر بشكل فردي ما إذا كان يريد استخدام BEMIT أم لا.

أوصي بشدة بقراءة مقالة BEMIT المقدمة هذه لمعرفة المزيد حول سبب تمديد ITCSS BEM ، وكيف تريد تسمية فئات CSS الخاصة بك.

يمكن تلخيص ITCSS كـ طريقة تنظيمية للكتابة قابلة لإعادة الاستخدام وقابلة للتطوير. BEM هو بناء جملة التسمية المفضل و BEMIT يمتد هذا للعمل مع مساحات الأسماء لرمز أكثر تحديدا ويمكن التعرف عليها.

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

تغليف

يبحث مطورو الواجهة الأمامية دائمًا عن تحسين سير العمل لديهم. ITCSS هو مجرد طريقة أخرى يمكن أن تسهم في تحسين طريقة هيكلة المواقع المعقدة.

تكمن الصعوبة في تعلم كيفية عمله في عمل مشروع حقيقي. إذا كانت لديك القدرة على القيادة وتعلم المزيد ، فقد يكون ITCSS شيئًا يستحق الإضافة إلى مجموعة أدواتك. على الرغم من أنني لم أجد أي وثائق رسمية ، لا يزال هناك الكثير من الموارد عبر الإنترنت للتعرف على ITCSS.

• إدارة مشاريع الويب واسعة النطاق باستخدام بنية CSS جديدة ITCSS (creativebloq.com)
• إدارة مشاريع CSS باستخدام ITCSS - شرائح العرض التقديمي (speakerdeck.com)
• مشاريع CSS مع ITCSS (عرض فيديو مدته 1 ساعة)
• ITCSS - وسيلة مثيرة للاهتمام لتنظيم مشاريع واسعة النطاق (css-tricks.com)

(صورة الغلاف عبر speakerdeck.com)