تعلم CSS من الصفر

ماذا يتحكم فيه CSS وكيف يصل إلى الصفحة؟

يفعل مهمة واحدة: يقرر كيف يبدو ما بناه HTML. وCSS اختصار لصفحات الأنماط المتتالية، وأصغر وحدة فيه قاعدة:

p {
  color: #333;
  line-height: 1.9;
}

هناك ثلاث طرق لربطه، ونستعمل واحدة عمليا. يمكنك كتابة خاصية style على الوسم نفسه، أو وضع القواعد داخل وسم style في head، أو حفظ كل شيء في ملف منفصل تناديه بسطر واحد:

<link rel="stylesheet" href="style.css">

اختر الثالثة واترك الأخريين للاستثناءات. والسبب ليس ذوقا: الملف المنفصل يُنزَّل مرة واحدة ويأخذه المتصفح من ذاكرته في الصفحة التالية، ويوم يتغير لون الأزرار تغيّر موضعا واحدا لا خمسين.

وشيء واحد يربك كل مبتدئ. قبل أن تكتب سطرا واحدا من CSS، للصفحة أنماط بالفعل: العنوان كبير وعريض، والروابط زرقاء تحتها خط، والقوائم لها نقاط. المتصفح يضعها بصفحة أنماطه الداخلية، وما تكتبه أنت إعادة كتابة لها.

المحددات: أن تخبر المتصفح أي عنصر

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

a         { color: #0b5; }         /* كل رابط */
.btn      { border-radius: 12px; } /* أي شيء بـclass="btn" */
#header   { position: sticky; }    /* العنصر ذو id="header" */
.card p   { margin-block: 0; }     /* كل p داخل .card */
a:hover   { text-decoration: underline; }

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

وهناك محدد يُدرَّس أقل وهو حيوي لمستخدم لوحة المفاتيح. فـhover لا يعني شيئا إلا للفأرة؛ ومن يتنقل في الصفحة بـTab عليه أن يرى أي عنصر يقف عليه الآن:

.btn:focus-visible {
  outline: 2px solid #0b5;
  outline-offset: 2px;
}

إن أزلت حلقة المتصفح الافتراضية بـoutline: none ولم تضع شيئا مكانها، فقد أعميت الصفحة على مستخدم لوحة المفاتيح. وهذا من المواضع القليلة التي يضر فيها سطر CSS واحد بإتاحة الوصول مباشرة.

لماذا لا يُطبَّق النمط الذي كتبته؟

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

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

تضع لونا على body وتتوقع أن تأخذه الروابط أيضا. لا تأخذه. فللمتصفح قاعدة مباشرة على وسم a، وأي قاعدة مباشرة، حتى قاعدة المتصفح نفسه، تسبق قيمة موروثة من الأب. الوراثة أضعف الطبقات لا أقواها.

أما الحل فيستغرق عشر ثوان. بدل التخمين، انقر بالزر الأيمن على العنصر واختر الفحص وافتح لسان Computed. هناك تُكتب القيمة النهائية لكل خاصية، وبتوسيع أحدها ترى القاعدة الفائزة باسم ملفها ورقم سطرها، والقواعد الخاسرة مشطوبة. ولا بديل عن هذا بالتخمين.

ثم important، الكلمة التي تكسر هذا الترتيب. اكتبها مرة وسيضطر كل قاعدة لاحقة أن تكتبها بدورها لتفوز، ومن ثَم يمضي ملفك بالوزن لا بالمنطق. وقاعدتنا بسيطة: إن لم يعمل دون important فالمحدد خاطئ. والاستثناء الحقيقي الوحيد هو تنسيق شفرة لم تكتبها ولا تصل إليها.

كل عنصر صندوق

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

وهناك قرار افتراضي يغيّره الجميع تقريبا ويشرحه القليلون. فافتراضيا يكون الرقم الذي تكتبه في width حجم المحتوى وحده، لذا فالعنصر بعرض مئة بالمئة ومعه padding يخرج عن موضعه. وسطر واحد يحل هذا نهائيا:

*, *::before, *::after { box-sizing: border-box; }

مع border-box يشمل رقم العرض الحشو والحد أيضا، وهو ما توقعته من البداية. ضع هذا السطر في أول كل ملف CSS ثم لا تفكر فيه.

وسلوك آخر يفاجئ الجميع مرة واحدة. المسافة الرأسية بين عنصرين متتاليين لا تُجمع؛ بل يفوز الأكبر منهما. ويسمى هذا دمج الهوامش، ويحدث للهوامش الرأسية فقط، لا للحشو ولا داخل flex وgrid. وهو أحد أسباب لجوء التخطيطات الحديثة إلى gap بدل الهامش.

التخطيط: متى flexbox ومتى grid؟

لـflexbox محور واحد ولـgrid محوران، وهذا الفرق يحسم معظم القرارات. بـflex ترصّ بضعة أشياء في صف أو عمود وتدع كلا منها يأخذ حجمه من محتواه. وبـgrid ترسم البنية أولا، فتعرّف الأعمدة والصفوف بنفسك، ثم يجلس المحتوى داخلها.

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

والقاعدة الثانية تستحق أن تحفظها. تقول إن كل عمود لا يقل عن ٢٢٠ بكسل وإن الأعمدة تتقاسم ما تبقى من مساحة، ويحسب المتصفح بنفسه كم عمودا يتسع عند كل عرض. شبكة متجاوبة دون أي media query.

وليسا متنافسين، واختيار أحدهما لا يعني التخلي عن الآخر. عمليا يُرسم هيكل الصفحة بـgrid ويجلس صف flex داخل كل خانة. والقاعدة التقريبية: إن استطعت أن تقول «هذه الأشياء القليلة بجوار بعضها» فـflex، وإن قلت «هذا الجدول من الخانات» فـgrid.

لماذا يحتاج موقع عربي إلى margin-inline-start لا margin-left

لأن margin-left ليس الموضع نفسه في العربية كما في الإنجليزية. فالخصائص الفيزيائية تفكر بيسار الشاشة ويمينها، والخصائص المنطقية تفكر ببداية السطر ونهايته. وmargin-inline-start يعني المسافة من حيث يبدأ السطر؛ يقرؤها المتصفح يمينا في العربية والفارسية ويسارا في الإنجليزية، وأنت لا تفعل شيئا.

والترجمة ليست صعبة:

واختباره يستغرق عشر ثوان ولا يعلّمه أحد: في أدوات المطور، على وسم html، غيّر قيمة dir من rtl إلى ltr وانظر إلى الصفحة نفسها. وكل ما لم ينتقل أو التصق بالحافة الخاطئة فهو خاصية فيزيائية بقيت. وعلى موقعنا نفسه هذا الفحص جزء من مراجعة كل قالب جديد.

وأين لا تلزم القاعدة: موقع بلغة واحدة من اليسار إلى اليمين لن يأخذ لغة أخرى أبدا. هناك لا يعض margin-left قط، والإصرار على الخصائص المنطقية عادة حسنة لا ضرورة. لكن إن كان موقعك عربيا، أو قد يصير إنجليزيا يوما، فهذا الفرق يقرر أيكلفك ذلك اليوم ساعة أم أسبوعا.

متغيرات CSS: عرّفها مرة واستعملها في كل مكان

متغير CSS اسم يحمل قيمة. واسمه التقني خاصية مخصصة، يبدأ بشرطتين ويُقرأ بـvar:

:root {
  --brand: #0b5;
  --gap: 16px;
}

.btn {
  background: var(--brand);
  padding: var(--gap);
}

وما يُقال أقل هو أن هذا المتغير يُورَّث كأي قيمة أخرى. أعد تعريف الاسم نفسه على عنصر واحد، فيرى كل ما بداخله القيمة الجديدة وتبقى بقية الصفحة كما هي:

.card--warn { --brand: #d97706; }

الآن صار كل زر داخل تلك البطاقة برتقاليا دون تغيير سطر واحد من قاعدة .btn. والسمة الداكنة تُبنى على هذه الفكرة بالضبط: كتلة واحدة تعيد تعريف أسماء قليلة، لا ملف CSS ثان.

وحدّه: هذا ليس متغيرا بالمعنى البرمجي. فالحساب به لا يجري إلا داخل calc، ولا يمكنك استعماله في شرط media query. وإن كنت تريد الحلقات والشروط والدوال فأنت متجه إلى أدوات مثل Sass، وهذا كل عملها، ومخرجاتها في النهاية هذا CSS البسيط نفسه.