أفضل ممارساتي – CSS

1. تمهيد

لا يُستغَل CSS اليوم بما يكفي (under-utilized). هناك فجوة بين مطوري Angular/React/Vue/... ومصممي الواجهات.

مصمم الواجهات يكدّس ثلاثين <div> متداخلة ويضع عليها أربعين صنف CSS، بينما ينتشي مطوّر Angular كل أسبوعين بأحدث مكتبة، في حين أن جحيم التبعيات لديه لم يعد يُبنى منذ زمن من دون npm i --force، لأن الـ Peer Dependencies متعارضة. لا يهتم متعصّب TypeScript كثيرًا بـ CSS وHTML. فحتى لأبسط حقول الإدخال عليه أن يستخدم Material، لأنه يخشى ألا يتمكن من إنجاز التحقق من صحة المدخلات بغير ذلك. وبالتأكيد لا يريد أحد أن يضيّع وقته في إعادة اختراع العجلة. أما أنه عند أول متطلب لا تغطيه المكتبة سيخسر كل ذلك الوقت من جديد ويجد نفسه غارقًا في قراءة GitHub Issues الخاصة بالمكتبة، فهذا ما لا يدركه.

نادرًا ما تتاح للمطوّر في مشروع Fullstack فرصة إطلاق مهاراته كمصمم واجهات أمامية. فهو يتسلّم نماذج الشاشات في Figma وعليه تنفيذها حرفيًا. ومعظم مطوري الواجهات الأمامية من هذا النوع لا يدركون أصلًا أن سطرًا واحدًا من CSS يكفي لإنشاء تخطيط متجاوب. CSS أقوى من أي وقت مضى. ولّى زمن حيل التنسيق بـ JS، واستعلامات الوسائط (media queries) الكثيرة، والالتفافات من أجل IE 8. مرحى!

2. توسيط مثالي

لم تلقَ دائمًا استحسانًا في المقابلات، لكنني استمتعت بها: كنت أجيب عن سؤال «هل أنت جيد في الواجهة الأمامية؟» بعبارة «أوه نعم. أستطيع توسيط <div> عموديًا.»

من المعروف أن توسيط div أمر عسير.

لم يعد كذلك:

.parent {
    display: grid;
    place-items: center
}

3. شبكة متجاوبة

.parent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

4. Flex متجاوب

.parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.box {
    flex: 1 1 150px; /*  Stretching: */
    flex: 0 1 150px; /*  No stretching: */
    margin: 5px;
}

5. تخطيط الصفحة

.parent {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

6. الشريط الجانبي

.parent {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

7. المصادر

1-Line Layouts