منهجيات CSS Methodologies - css

ابوبكر هلال محمد

منذ 3 أشهر

10 دقائق للقراءة

1896 كلمة

عندما تبدأ في العمل على أوراق أنماط (styleSheet) أكبر ومشاريع كبيرة ، ستكتشف أن الاحتفاظ بملف CSS ضخم قد يكون أمرًا صعبًا. في هذا المقال سوف اشرح أفضل الممارسات لكتابة CSS الخاص بك لتسهيل صيانته ، وبعض الحلول وبعض المنهجيات التي ستجدها قيد الاستخدام من قبل الآخرين للمساعدة في تحسين إمكانية الصيانة والتوسع والتمدد في ملفات اوراق الانماط (styleSheet).

منهجيات css #

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

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

1- منهجية OOCSS #

تم إطلاق CSS الموجهة للكائنات ، أو OOCSS اختصار الي (Object-Oriented CSS) ، في عام 2009. لقد كانت أول منهجية CSS يتم تبنيها على نطاق واسع. لا يزال مؤثرًا بشكل كبير حتى اليوم. تقسم تخطيط الصفحة إلى كائنات (objects) ، ثم تقوم بتجريد CSS إلى وحدات نمطية.

تميز المنهجية بشكل واضح بين المحتوى وحاوياته. في OOCSS ، تتم كتابة قواعد النمط حصريًا باستخدام محددات فئة CSS (class selectors).

علي سبيل المثال اذا اردنا تنسيق زر ( button) فان منهجية ooscss تعتبر ان الزر هو كائن واضافة لون له او خلفية هو خاصية تكون منفصلة ويمكن استخدام تلك الخصائص مع كائنات اخري

الهيكل الأساسي للزر.button

اللون الرمادي هو خاصية مرئية للكائن.c-grey

اللون الاحمر هو خاصية مرئية للكائن.c-red

.button { padding: 10px 16px; }
.c-grey { color: grey; }
.c-red { color: red; }

<button class="button c-grey">زر</button>

<button class="button c-red">زر بلون نص احمر</button>

<p class="c-grey">نص عادي</p>

وهكذا تستمر بهذا النمط في كل المشروع لديك كل كائن تعطيه التنسيق الذي يتمييز به ويمكنك استخدم تنسيق خصائصه وتعيد استخدامها في مشروعك.

تقدم OOCSS العديد من المفاهيم المفيدة ، لكن افتقارها إلى القواعد يؤدي إلى اختلافات في التفسير يمكن أن تؤدي إلى تناقضات. ومع ذلك ، فقد تم استخدامه كمصدر إلهام لمنهجيات أكثر صرامة.

2- منهجية BEM #

بصورة مختصر :هي استخدم اصطلاحًا قياسيًا لتسمية الفئات (classes)

Bem هي اختصار لي (Block Element Modifier)

يشجع BEM المطورين على تقسيم التخطيطات إلى كتل (Block) وعناصر متداخلة (Element). يجب أيضًا تحديد الاختلافات عن المظهر المتوسط لكتلة أو عنصر وتطبيقها باستخدام المُعدِّلات (Modifier)

هذه المنهجية تقسم الواجهة الامامية (UI) الي كتل وهو المستوى الأعلى للمكون( block) كل كتلة هي عبارة عن مكون (component) يمكن ان يكون بداخله عناصر وتسميها في المنهجية (element) ويمكن ان تتعدل خصائص كل من الكتل او العناصر وفي هذه الحالة تسمي معدلات (Modifier)

يكمن سر هذه المنهجية في طريقة تسمية الكلاسات لديك فهي :

تسمي الكتلة هكذا


    .block

والعناصر الداخليه للكتلة عن طريقة كتابة شرطتين سفليتين (two underscores) بعد اسم العنصر هكذا


    .blockname__elementname

وتسمي الكلاسات التي تغير من حالة العنصر او المكون بالمعدلات او المتغيرات وتكتب عن طريقة كتابة شرطتين (two hyphens) بعد اسم العنصر


    . blockname__elementname--modifername

او بعد اسم الكتلة

    . blockname--modifername

ولكي تتضح الصورة ناخذ المثال التالي :

<div class="modal  modal--large">

  <h1 class="modal__title">تسجيل الدخول إلى حسابك</h1>

  <div class="modal__content">
    <form class="form-login">
    </form>
  </div>

</div>

/**
 * The top-level ‘Block’ of a component.
 * هنا المودل هو الكتلة الأعلى للمكون
 */
.modal {}

  /**
   * An ‘Element’ that is a part of the larger Block.
   * نلاحظ ان عنوان المودل يمثل "عنصر" يمثل جزءًا من الكتلة الأكبر
   */
  .modal__title {}

/**
 * A ‘Modifier’ of the Block.
 * نلاحظ ان المودل ده ممكن يتغير ويتعدل حجمو 
 */
.modal--large {}

هذه المنهجية ربما تساعدك كثير في تسمية الفئات او الكلاسات بطريقة منظمة وربما في المشاريع الصغير تجني ثمار جيدة في تنظيم الكود ولكن لديها بعض السلبيات ومنها يمكن ان يطول اسم الكلاس بطول قد يكون مزعج , وايضا قد تواجه صعوبة ف تسمية الكلاسات للعناصر او المكونات المتداخلة بعمق كبير .

3- منهجية SMACSS #

بصورة مختصر :هي تقوم بتقسيم كود CSS عبر ملفات متعددة لتحسين الأداء والتنظيم

هي اختصار الي (Scalable and Modular Architecture for CSS) تعمل SMACSS عن طريق تقسيم CSS إلى خمس فئات ( base, layout, module, state , theme ) تنقسم عادةً إلى ملفات منفصلة. تتجاوز الأنماط الأساسية الأنماط الافتراضية ويتم تطبيقها بشكل أساسي باستخدام محددات العناصر

ملف base #

يتم فيه تنسيق العناصر بواسطة محددات العناصر نفسها والتي تطبق علي مستوي المشروع ويطغي علي كل التنسيقات الاخري (يطغي حتي علي التنسيقات الفريم ويرك الخارجية) مثال

h1 { font-size: 20px; }
a { text-decoration: none; }

ملف layout #

يتم فيه تنسيق انماط التخطيط العامة مثل header,footer,sidebar وغيرها وممكن ان يبدا بالبادئة -l-header,l-sidebar وذلك اختياريا

.l-header { background-color:red; }
.l-sidebar { float: right; }

ملف Module #

وفيها يتم كتابة التنسيقات التي يمكن اعادة استخدامها مثل buttons ,lists


.list { … }
.list--icon { … }
.list--text { … }

ملف State #

ملف يتم فيه تنسيق العناصر التي تتغير حالاتها مثل المخفية او التي تريد تعطيلها ويفضل ان تبدا اسماء الكلاسات بالبادئة (.is-) or (.has-)


.is-hidden { display: none; } 
.is-active {
  background-color: blanchedalmond;
}
.button.is-disabled { … }

ملف Theme #

وفيه توضع تنسيقات التي تتعلق بثيم الموقع ككل

.mod {
    background-color: black;
}

4- منهجية Atomic CSS #

بصورة مختصر : هي إنشاء محدد فئة (class selector ) لكل إعلان CSS متكرر

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

اي انها تعني بفصل اي تنسيق لوحدها اي محدد فئة يعمل شي واحد فقط

.mb-sm { margin-bottom: 16px; }
.mb-lg { margin-bottom: 32px; }
.color-blue { color: #1e90ff; }

<div class="mb-lg">
 <p class="mb-lg color-blue">Blue text</p>
 <img class="mb-sm" />
</div>

هناك طرق برمجية لـ ACSS تقوم تلقائيًا بإنشاء CSS بناءً على الفئات أو السمات التي يضيفها المستخدمون إلى Atomizer . HTML هي إحدى هذه الأدوات ، مما يسمح بإعادة تعريف HTML السابق على النحو التالي:

<div class="Mb(32px)">
 <p class="Mb(32px) C(#1e90ff)">Blue text</p>
 <img class="Mb(16px)" />
</div>

وسوف يتم انشاء css تلقائيًا كلاتي :

.Mb\(16px\)   
{ margin-bottom: 16px; }
.Mb\(32px\)   
{ margin-bottom: 32px; }
.C\(#1e90ff\) { color: #1e90ff; }

يمكنك تنزيلها عن طريق الامر

npm install atomizer -g

5- منهجية ITCSS #

بصورة مختصر :هي تحسين في منهجية bem باضافة بعض البادئات في البداية (suffixes) وكل بادئة تشير الي :

Syntax	Description
o-	يشير الي كائن
c-	يشير الي مكون معين
u-	يشير الي وحدات معينة
t-	يشير الي اضافة theme معين
s-	يشير الي تنسيق جديد
is-, has-	تشير الي حالة معينة
js-	تشير الي التنسيق الذي يمكن الوصول اليه عن طريق جافااسكربت
qa-	يشير الي التنسيق الذي يمكن ان يستخدم في الاختبار test

مثال لاستخدام o-

.o-layout {}

  .o-layout__item {}

.o-layout--fixed {}

مثال لاستخدام c-

.c-modal {}

  .c-modal__title {}

.c-modal--gallery {}

مثال لاستخدام t-

.t-light {}

يمكنكم قراءة المزيد عنITCSS

هنالك بعض المنهجيات لم اتحدث عنها مثلا :

هذه المنهجيات وغيرها ما هي الا طرق لكيفية جعل ملفات التنسيق لديك قابلة للصيانة والتمدد والقراءة ليست مجبر ان تطبق اي واحد منها , يفضل ان كنت تعمل مع فريق عمل ان تجلسوا وتحددوا اي منهجية سوف تتبعوها او تعملو بها مع بعض التعديلات التي سوف تدمج بها لان هذا سوف ينظم عملكم.

نصائح لجعل ملف stylesheet مرتب #

لابد ان يحتوي مشروعك علي دليل لتنسيق الكود (coding style guide) #

اذا كنت تعمل مع فريق في مشروع قائم او مشروع قادم يجب عليكم اولا التاكد من وجود دليل معين لترميز كود css او عمل دليل معين يتفق عليه الفريق والبدا به .

اجعل تنسيق ال css مقروء (Formatting readable CSS) #

يفضل بعض المبرمجين كتابة ال css بهذه الصورة

.box { background-color: #567895; }
h2 { background-color: black; color: white; }

ويفضل البعض الاخر كتابها بهذه الصورة

.box {
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}

وفي كلتا الحالتين سوف تعمل ولكن الافضل في نظري الطريقة الثانية فهي طريقة مقروءة وجيدة

تعود دائما علي كتابة تعليقات داخل ملف css #

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

ويمكنك ايضا كتابة تعليقات منطقية للفصل بين الاقسام المختلفة في ملف التنسيق يمكنك استخدام || حتي يسهل عليك البحث عنها.

/* || About Page */

...

استخدم صيغة موحدة لكل من الالوان او وحدات قياس #

استخدام صيغة موحدة يسهل للمطور فهم الوحدات المستخدمة.

.box { 
    width:30px;
    height:15rem;
    color:#fffff;
}

/* convert to  */

.box { 
    width:2rem;
    height:15rem;
    color:#fff;
}

اجعل سلسلة المحددات ثلاثة او اقل (Make the selector chain three or less) #

لا تجعل سلسلة المحددات طويلة حتي لا تاخذ زمن في تحديد العنصر

.headre .navbar .nav-item .nav-link span { 
    color:red;
}

/* convert to  */

.navbar .nav-link span{ 
    color:red;
}

لا تكرر خصائص CSS ، وأنشئ فئات مشتركة لإعادة استخدام الفئات #

.list-link  { 
    color:blue;
}

.logo-link { 
    color:blue;
}

.footer-link { 
    color:blue;
}

/* convert to  */

.primary-color { 
    color:blue;
}

/* 
and romove all style
 above and use class primary-color
 in html
*/

اليك بعض المصادر التي تم اقتباس بعض المقال منها : #

A web designer's guide to CSS methodologies

More Transparent UI Code with Namespaces

CSS Methodologies

A Look at Some CSS Methodologies

Organizing your CSS

CSS guidelines

Battling BEM CSS: 10 Common Problems And How To Avoid Them