لغة CSS للمبتدئين: طريقة الكتابة وأهم المفاهيم والاستخدامات

CSS اختصار لـCascading Style Sheets، وهي اللغة التي تصف طريقة عرض مستندات HTML: الألوان والخطوط والمسافات والتخطيط والتجاوب مع أحجام الشاشات وغير ذلك. HTML يحدد بنية المحتوى، بينما CSS تتحكم في مظهر هذه البنية.

كيف تعمل CSS؟

القاعدة الأساسية تتكون من Selector ثم مجموعة Declarations:

.card {
  padding: 16px;
  border-radius: 12px;
}

.card هو Selector، وpadding وborder-radius خصائص، والقيم تحدد النتيجة التي سيعرضها المتصفح.

Selector: كيف تختار العنصر؟

يمكن استهداف عنصر HTML مثل p، أو Class باستخدام النقطة مثل .button، أو ID باستخدام # مثل #header. انتبه: الـClass يبدأ بنقطة، والـID يبدأ بعلامة #.

ما معنى Cascading؟

قد تطابق أكثر من قاعدة العنصر نفسه. المتصفح يقرر أي قيمة تطبق بناءً على أصل القاعدة والأهمية والـSpecificity وترتيب القواعد. فهم Cascade أفضل من حل كل تعارض باستخدام !important.

طرق إضافة CSS إلى HTML

External stylesheet

الطريقة المعتادة في المشاريع: ملف .css مستقل يتم ربطه بالصفحة. يسهل الصيانة وإعادة استخدام القواعد.

Internal style

قواعد داخل عنصر <style> في الصفحة. مفيدة في حالات محدودة لكنها ليست الأفضل لمشروع كبير.

Inline style

CSS داخل Attribute style على عنصر واحد. يصلح لاستخدامات محدودة، لكنه يجعل الصيانة وإعادة الاستخدام أصعب.

Box Model

كل عنصر يمكن التفكير فيه كصندوق يتكون من Content ثم Padding ثم Border ثم Margin. كثير من مشاكل المقاسات والمسافات تبدأ من عدم فهم Box Model.

.box {
  width: 300px;
  padding: 20px;
  border: 1px solid;
  margin: 24px auto;
}

استخدم box-sizing

في تصميمات كثيرة يُستخدم:

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

بهذا تدخل Padding وBorder ضمن حساب العرض المحدد، ما يجعل المقاسات أسهل في التحكم.

Flexbox

Flexbox ممتاز لترتيب العناصر في بعد واحد مثل صف أزرار أو Navigation:

.actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

CSS Grid

Grid مناسب للتخطيطات ثنائية الأبعاد مثل بطاقات المنتجات:

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

التصميم المتجاوب

لا تبنِ نسخة Desktop ثم تحاول إصلاح الهاتف في النهاية. استخدم وحدات مرنة وGrid/Flex، وأضف Media Queries عند الحاجة:

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

الألوان والخطوط

استخدم نظامًا متسقًا بدل تكرار قيم عشوائية. CSS Custom Properties تساعد:

:root {
  --space-md: 16px;
  --radius: 10px;
}

ثم استخدم var(--space-md) في القواعد.

Pseudo-classes وPseudo-elements

مثل :hover و:focus و:nth-child() لتحديد حالة، و::before و::after لإضافة جزء بصري دون عنصر HTML إضافي.

Accessibility في CSS

• حافظ على Contrast كافٍ.
• لا تزل Focus Outline دون بديل واضح.
• لا تعتمد على اللون وحده لنقل معلومة.
• احترم إعداد prefers-reduced-motion عند إضافة Animation كبيرة.
• تأكد أن Zoom وتكبير الخط لا يكسر التخطيط.

أخطاء شائعة للمبتدئين

• خلط Class وID.
• Selectors طويلة وهشة مرتبطة ببنية HTML كاملة.
• الإفراط في !important.
• استخدام أبعاد ثابتة تسبب Horizontal Scroll.
• تكرار القيم بدل استخدام Variables.
• عدم استخدام DevTools لفهم القواعد الفعلية.

كيف تتعلم CSS عمليًا؟

1. تعلم HTML الأساسي أولًا.
2. تدرب على Selectors وCascade وBox Model.
3. تعلم Flexbox ثم Grid.
4. ابنِ مكونات صغيرة بدل مشاهدة الشرح فقط.
5. استخدم Browser DevTools لتجربة القواعد.
6. طبّق Responsive وAccessibility في كل مشروع.

CSS داخل ووردبريس

المفاهيم نفسها تنطبق في WordPress، لكن مكان وضع الكود يعتمد على القالب والبنية. للتطبيق العملي داخل ووردبريس استخدم دليل «طرق إضافة أكواد CSS للووردبريس» بدل تعديل ملفات Parent Theme عشوائيًا.

الخلاصة

لغة CSS للمبتدئين تبدأ بفهم Selector وDeclaration وCascade وBox Model، ثم Flexbox وGrid والتجاوب. لا تحتاج حفظ كل Property؛ الأهم أن تفهم كيف يختار المتصفح القاعدة وكيف تبني Layout يمكن صيانته واستخدامه على شاشات مختلفة.

تطبيق CSS داخل ووردبريس: راجع طرق إضافة أكواد CSS للووردبريس لاختيار المكان الصحيح للكود دون تعديل ملفات Core.