هل فعلًا تحتاج إلى استخدام إطار عمل CSS لبناء واجهة موقعك أو تطبيقك؟

مضت فترةٌ لا بأس بها على ظهور إطارات العمل، وازدادت شهرتها في مجال تطوير واجهات المواقع. توفِّر تلك الإطارات مقتطفاتٍ من الشيفرات التي تستطيع نسخها ولصقها في موقعك لبناء تخطيط الصفحة وواجهة المستخدم.
ربما قرأت مقالاتٍ كثيرة عن كيفية الاستفادة من تلك الإطارات في مشاريعك، لكنني هنا لأفعل العكس: أنوهك لبعض السلبيات التي قد تجلبها إطارات العمل إلى مواقعك أو تطبيقات الويب التي تبرمجها؛ وكيف تستطيع أن تتفاداها أو تقلل من تأثيرها.

عندما أسألُ الآخرين لماذا يستعملون إطار عملٍ معيّن، فسيقع جوابهم تحت التصنيفات الآتية:

1. السرعة: أغلبية الأشخاص يعتقدون أنهم سيطورون الموقع بشكلٍ أسرع. وربما يكون هذا صحيحًا في المراحل الأولى للمشروع؛ لكنه سيشكِّل حِملًا على عاتقك (سنتعرف لاحقًا لماذا).
2. يعتقد بعض الأشخاص أنَّه من المستحسن أن يستعملوا إطار عمل، خصوصًا أولاءك الذين يبدؤون تطوير واجهات الويب لتوِّهم. ويدعم هذا الاعتقاد تضمين إطارات العمل في الورشات التدريبية أو في متطلبات الوظائف.
3. التصميم: هنالك الكثير من المطورين الذين يرغبون بإطلاق مشاريعهم لكن لا يتوفر لديهم مصمِّم، لذا يلجؤون إلى إطارات العمل، التي توفِّر تصميمًا أساسيًا يستطيع المطورون الاعتماد عليه واستخدامه. وعلى الرغم من الفائدة العظيمة وراء ذلك، إلا أنَّ موقعك أو تطبيقك سينتهي به المطاف ليبدو كغيره من المواقع الحديثة الموجودة على الإنترنت، لكن قد ترى أنَّ ذلك لا يؤثر على مشروعك، فالأمر عائدٌ إليك في النهاية.

السلبيات

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

شيفرات HTML لا تحمل بُعدًا دلاليًا (Unsemantic HTML code)

هذه المشكلة ليس مقتصرةً على إطارات العمل، لكنني أراها متفشيةً كثيرًا في أشهرها.
على سبيل المثال، ربما تقرأ في توثيق إطار العمل الذي يتحدث عن تنسيق الأزرار، وتجد قطعةً من الشيفرات تخبرك كيف تستخدم صنفًا (class) من أصناف CSS للأزرار المُعطَّلة (disabled) بدلًا من إضافة خاصية disabled إلى عنصر <button> نفسه.
وهنالك أمثلةٌ كثيرةٌ تستعمل عناصر <div> أو <span> في أماكن يُفضَّل أن يُستعمَل فيها عنصرٌ هيكليٌ مثل <article> أو <date>. ودعنا لا نتحدث عن وجود عنصر <div> داخل عنصر <div> داخل عنصر <div>…

مُحدِّدات دقيقة جدًا

مرةً أخرى، هذه المشكلة ليست خاصة بإطارات العمل، لكن يمكنك ملاحظتها في أشهرها: الميل إلى استخدام مُحدِّدات (selectors) دقيقة جدًا لإنشاء قواعد CSS. على سبيل المثال:

.table-responsive > .table-bordered > thead > tr > th:first-child

ماذا يحدث لو حاولت تجاوز بعض خاصيات <th>؟ ستحتاج إلى إنشاء مُحدَّد أكثر دقةً وتخصيصًا! لا يمكنك استعمال قاعدة CSS كالآتية:

th.important-heading { color: #000; }

وإنما عليك إنشاء قاعدة مثل هذه:

.table-responsive > .table-bordered > thead > tr > th:first-child.important-heading {
  color: #000;
}

الذي يحدث فعلًا هو أنَّ الجميع يتفادون كتابة مثل هذه الشيفرات. لذا سنبدأ برؤية مثل هذه القاعدة:

th.important-heading { color: #000; !important }

والتي تزيد من تعقيد الأمر بشكل أكبر.

قواعد لا تحتاج لها

إذا ضمَّنتَ إطار العمل بأكمله بدلًا من استخدامك لأجزاءٍ تحتاج لها منه، فسينتهي بك المطاف بقواعد CSS لا تستعملها.
ربما تتعامل مع هذه الحالة بمساعدة أدوات لمعالجة الشيفرات لإزالة القواعد غير المستخدمة، لكن عندما تبدأ بإضافة أو إزالة الأصناف (classes) ديناميكيًا باستخدام JavaScript، فلن تكون متأكدًا 100% أنَّك لن تحتاج إلى تلك الشيفرات.
قواعد CSS غير المستخدمة تجعل ملفاتك كبيرةً، مما يُشكِّل مشكلةً للهواتف النقالة التي تتصل بالإنترنت عبر الشبكة الخلوية بدلًا من Wi-Fi. لكنك علاوةً على ذلك، ستجعل كمية الشيفرات في مشروعك كبيرةً مما يُصعِّب عملية الصيانة وتتبع الأخطاء.

اتخذ قرارك

جميع إطارات العمل تتبع وجهات نظر معيّنة، وهذه ليس مشكلةً إذا كانت لديك وجهة نظر متطابقة مع إطار العمل.
لكن في بعض الأحيان لا تتطابق وجهة نظرك مع أسلوب إطار العمل. على سبيل المثال، هذه هي شيفرة HTML التي يقترحها أحد إطارات العمل لإنشاء لافتات نصيّة (text labels) ملونة:

<span class=“label label-warning”>Out of stock</span>

أرى أنَّ أسماء الأصناف مكررة، لأنني أفضِّل استخدام الأصناف التي أجدها ضروريةً فقط. إذا كنتُ صاحب الشيفرة السابقة، فسأستخدم الصنف label-warning فقط.
ماذا لو كنتَ معجبًا بإحدى طرق الهيكلة في CSS التي لا يستعملها إطار عملك؟

بدائل إطارات العمل

كتابة شيفرات HTML و CSS يدويًا! إذا لم تحب الشيفرات التي يُنتِجها إطار العمل، فلِمَ لا تكتب الشيفرات الخاصة بك. إذا كانت القواعد التي يوفرها إطار العمل تجعلك لا تعمل بكفاءة، فيجدر بك كتابة قواعدك الخاصة.
إذا كنتَ تحتاج إلى شبكة (grid)، فيمكنك أن تستعمل Flexbox، التي تُسهِّل إنشاء تخطيط للصفحة مقارنةً مع استعمال عناصر <div> عائمة (float). إذا لم تكن تعرف كيفية التعامل مع Flexbox، فألق نظرة على هذا هذا الدرس. وإذا أردتَ أن تعرف كيف ستبدو الشيفرة، فانظر إلى المثال الآتي:
شيفرة HTML

<header class="main-header">Header</header>
<div class="row">
  <aside class="primary-sidebar">Sidebar (left)</aside>
  <main class="content">Main content goes here</main>
  <aside class="secondary-sidebar">Sidebar (right)</aside>
</div>
<footer class="main-footer">Footer</footer>

شيفرة CSS

* {
  padding: 0;
  margin: 0;
}

body {
  font-size: 1.2em;
  display: flex;
  flex-direction: column;
  height: 100vh;
  text-align: center;
}

.row {
  flex: 1 1 auto;
  background: green;
  display: flex;
}

.main-header {
  background: red;
  flex: 0 0 auto;
}



.main-footer {
  background: red;
  flex: 0 0 auto;
}

.primary-sidebar, .secondary-sidebar {
  background: turquoise;
  flex: 0 0 auto;
  width: 20%;
}

.content {
  flex: 1 1 auto;
  min-width: 400px;
}

سيكون لدينا Grid في المستقبل القريب، والتي ستُسهِّل إنشاء الشّبكات، ولن تشعر أنَّك بحاجة إلى استعمال شبكة أخرى قط.
ملاحظة: لكي ترى الناتج على متصفحك، فجرِّب النسخة الليلية من Firefox أو آخر نسخة من متصفح Firefox Developer Edition. أما لكي تُشاهد هذه الأمثلة في نسخة Firefox أخرى، فعليك تفعيل الراية layout.css.grid.enabled بالذهاب إلى about:config.
شيفرة HTML

<header class="main-header">Header</header>
<main class="content">Main content goes here</main>
<aside class="primary-sidebar">Sidebar (left)</aside>
<aside class="secondary-sidebar">Sidebar (right)</aside>
<footer class="main-footer">Footer</footer>

شيفرة CSS

* {
  padding: 0;
  margin: 0;
}

body {
  font-size: 1.2em;
  text-align: center;

  height: 100vh;
  display: grid;
  grid-template-columns: 20% 1fr 20%;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header      header  header"
    "sidebar-pri content sidebar-alt"
    "footer      footer  footer";
}

.main-header {
  background: red;
  grid-area: header;
}

.main-footer {
  background: red;
  grid-area: footer;
}

.primary-sidebar, .secondary-sidebar {
  background: turquoise;
}

.primary-sidebar {
  grid-area: sidebar-pri;
}

.secondary-sidebar {
  grid-area: sidebar-alt;
}

.content {
  background: green;
  grid-area: content;
}

إذا كنتَ تحتاج إلى بعض عناصر الواجهة الرسومية، مثل القوائم المنسدلة، فلا حاجة إلى كتابتها من الصفر، وإنما تستطيع أخذ ذاك الجزء من إطار العمل (عوضًا عن كامل الإطار) أو أن تستعمل مكتبة خارجية ليس لها اعتماديات.
إذ كنتَ تحتاج إلى تصميمٍ لواجهة موقعك أو تطبيقك، فيمكنك أن تحصل على ملفات Sass أو Less بدلًا من شيفرات CSS النهائية. وبهذا تستطيع إنشاء مُحدِّدات خاصة بك، مما يسمح لك باستخدام شيفرات HTML كما تحب. لكن تذكّر بأنَّ موقعك سيبدو كغيره من العديد من المواقع.
إذا كنتَ تريد طريقةً لتوحيد عملية إنشاء عناصر الواجهة الرسومية في مشروعك، لكي يعرف الآخرون ما هي الشيفرة التي يجب أن يستخدموها وكيف يُضيفون عناصر جديدة؛ فالذي تبحث عنه هو «دليل لكتابة الأنماط» (style guide. باختصار: إطار عمل خاص بك). أرى أنَّ عليك استخدام هذه الطريقة في المشاريع الكبيرة.

الخلاصة

هنالك إيجابياتٌ كثيرة لاستخدام إطارات العمل، لكن هنالك أيضًا سلبياتٌ عليك توخي الحذر منها، ولا تنسَ أن تتعرف على الأدوات والواجهات البرمجية (APIs) المتاحة لك لإنشاء أنماط CSS خاصة بمشروعك أو تطبيقك.
ترجمة -وبتصرّف- للمقال You might not need a CSS framework لصاحبته Belén Albeza.