بناء جمل CSS ومجموعات القواعد والتعليقات

تشريح مجموعة قواعد CSS

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

تتكون مجموعة قواعد CSS من جزأين أساسيين: المحدد وكتلة التصريح. المحدد يحدد أي عنصر أو عناصر HTML يجب أن تنطبق عليها الأنماط. كتلة التصريح، المحاطة بأقواس معقوصة { }، تحتوي على تصريح واحد أو أكثر -- كل منها يجمع بين خاصية وقيمة.

selector {
    property: value;
    property: value;
    property: value;
}

/* مثال حقيقي: */
h1 {
    color: navy;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 16px;
}

دعنا نحلل كل مكون بالتفصيل:

• المحدد (h1) -- يخبر المتصفح أي عناصر في الصفحة تستهدفها مجموعة القواعد هذه. في المثال أعلاه، كل عنصر <h1> في المستند سيحصل على هذه الأنماط. يمكن أن تكون المحددات بسيطة (اسم وسم، فئة، معرف) أو معقدة (تجمع عدة شروط). سنستكشف المحددات بعمق في الدرس التالي.
• قوس معقوص فاتح ({) -- يمثل بداية كتلة التصريح. كل شيء بين { و } هو جزء من تصريحات مجموعة القواعد هذه.
• التصريح (color: navy;) -- تعليمة تنسيق واحدة. يتبع دائما النمط property: value;. كل تصريح يغير جانبا مرئيا واحدا محددا من العناصر المستهدفة.
• الخاصية (color) -- الجانب المحدد من العنصر الذي تريد التحكم فيه. تحتوي CSS على مئات الخصائص التي تغطي الألوان والخطوط والتباعد والتخطيط والرسوم المتحركة والمزيد. الخصائص هي كلمات مفتاحية محددة مسبقا -- لا يمكنك اختراع خصائصك الخاصة (رغم أن خصائص CSS المخصصة توفر آلية شبيهة بالمتغيرات).
• النقطتان (:) -- الفاصل المطلوب بين اسم الخاصية والقيمة. بدونه، لا يستطيع المتصفح تحليل التصريح.
• القيمة (navy) -- الإعداد المحدد الذي تريده لتلك الخاصية. تقبل الخصائص المختلفة أنواعا مختلفة من القيم: كلمات مفتاحية (مثل navy، bold، center)، قيم رقمية بوحدات (مثل 16px، 2rem، 50%)، رموز ألوان (مثل #1a1a2e، rgb(255, 0, 0))، أو قيم دالية (مثل url()، calc()).
• الفاصلة المنقوطة (;) -- تمثل نهاية كل تصريح. الفاصلة المنقوطة مطلوبة بين التصريحات. بينما التصريح الأخير في الكتلة تقنيا لا يحتاج واحدة، يجب أن تضعها دائما -- حذفها هو المصدر الأول الأكثر شيوعا لأخطاء CSS الخفية.
• قوس معقوص مغلق (}) -- يمثل نهاية كتلة التصريح ومجموعة القواعد بأكملها.

تصريحات متعددة في مجموعة قواعد واحدة

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

/* تنسيق بطاقة مقال بتصريحات متعددة */
.article-card {
    display: block;
    max-width: 640px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.7;
    color: #333333;
    transition: box-shadow 0.3s ease;
}

/* عندما تظهر نفس الخاصية مرتين، الأخيرة تفوز */
p {
    color: red;
    font-size: 16px;
    color: blue;  /* هذه تتجاوز color: red السابقة */
}
/* النتيجة: الفقرات ستكون زرقاء، 16px */

محددات متعددة لمجموعة قواعد واحدة

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

/* بدون تجميع -- متكرر وصعب الصيانة */
h1 {
    font-family: "Segoe UI", Arial, sans-serif;
    color: #1a1a2e;
    line-height: 1.2;
}

h2 {
    font-family: "Segoe UI", Arial, sans-serif;
    color: #1a1a2e;
    line-height: 1.2;
}

h3 {
    font-family: "Segoe UI", Arial, sans-serif;
    color: #1a1a2e;
    line-height: 1.2;
}

/* مع التجميع -- نظيف ولا تكرار (DRY) */
h1,
h2,
h3 {
    font-family: "Segoe UI", Arial, sans-serif;
    color: #1a1a2e;
    line-height: 1.2;
}

/* ثم يمكنك إضافة أنماط فريدة لكل عنوان بشكل منفصل */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

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

/* يمكنك خلط أنواع المحددات في مجموعة */
h1,
.page-title,
#main-heading,
[role="heading"] {
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.5em;
}

/* نمط شائع: إعادة تعيين أنماط الروابط عبر الحالات */
a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
}

/* نصيحة تنسيق: ضع كل محدد في سطره الخاص */
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

الخصائص المختصرة مقابل التفصيلية

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

ما هي الخصائص المختصرة؟

الخاصية المختصرة تتيح لك تعيين عدة خصائص مرتبطة في تصريح واحد. مثلا، بدلا من كتابة أربعة تصريحات هامش منفصلة، يمكنك كتابة واحد:

/* تفصيلي -- أربعة تصريحات منفصلة */
.box {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

/* مختصر -- تصريح واحد، نفس النتيجة */
.box {
    margin: 10px 20px;
}

/* ---------------------------------------- */

/* تفصيلي -- خصائص الخلفية بشكل فردي */
.hero {
    background-image: url("hero.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #1a1a2e;
}

/* مختصر -- جميع خصائص الخلفية في واحدة */
.hero {
    background: #1a1a2e url("hero.jpg") center / cover no-repeat fixed;
}

/* ---------------------------------------- */

/* تفصيلي -- خصائص الخط بشكل فردي */
.text {
    font-style: italic;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.6;
    font-family: Georgia, serif;
}

/* مختصر -- جميع خصائص الخط في واحدة */
.text {
    font: italic 700 18px/1.6 Georgia, serif;
}

/* ---------------------------------------- */

/* تفصيلي -- خصائص الحد بشكل فردي */
.card {
    border-width: 2px;
    border-style: solid;
    border-color: #e0e0e0;
}

/* مختصر -- جميع خصائص الحد في واحدة */
.card {
    border: 2px solid #e0e0e0;
}

الخصائص المختصرة الشائعة

إليك الخصائص المختصرة الأكثر استخداما:

• margin -- تعيّن margin-top، margin-right، margin-bottom، margin-left
• padding -- تعيّن padding-top، padding-right، padding-bottom، padding-left
• border -- تعيّن border-width، border-style، border-color
• background -- تعيّن background-color، background-image، background-position، background-size، background-repeat، background-attachment
• font -- تعيّن font-style، font-variant، font-weight، font-size، line-height، font-family
• flex -- تعيّن flex-grow، flex-shrink، flex-basis
• transition -- تعيّن transition-property، transition-duration، transition-timing-function، transition-delay
• animation -- تعيّن animation-name، animation-duration، animation-timing-function، animation-delay، animation-iteration-count، animation-direction، animation-fill-mode، animation-play-state

أنماط قيم الهامش والحشو المختصرة

تتبع الخصائص المختصرة margin و padding نمطا خاصا بناء على عدد القيم التي تقدمها:

/* قيمة واحدة: تنطبق على جميع الجوانب الأربعة */
.box-a {
    margin: 20px;
    /* مثل: margin-top: 20px; margin-right: 20px;
            margin-bottom: 20px; margin-left: 20px; */
}

/* قيمتان: عمودي | أفقي */
.box-b {
    margin: 10px 20px;
    /* مثل: margin-top: 10px; margin-right: 20px;
            margin-bottom: 10px; margin-left: 20px; */
}

/* ثلاث قيم: أعلى | أفقي | أسفل */
.box-c {
    margin: 10px 20px 30px;
    /* مثل: margin-top: 10px; margin-right: 20px;
            margin-bottom: 30px; margin-left: 20px; */
}

/* أربع قيم: أعلى | يمين | أسفل | يسار (باتجاه عقارب الساعة) */
.box-d {
    margin: 10px 20px 30px 40px;
    /* مثل: margin-top: 10px; margin-right: 20px;
            margin-bottom: 30px; margin-left: 40px; */
}

/* وسيلة للتذكر: فكر في الساعة -- ابدأ من 12 واتجه مع عقارب الساعة:
   الساعة 12 = أعلى
   الساعة 3 = يمين
   الساعة 6 = أسفل
   الساعة 9 = يسار */

/* مشكلة محتملة مع المختصرة */
.element {
    background-color: #1a1a2e;
    background-image: url("pattern.png");
    background-repeat: repeat;
    background: url("hero.jpg") center / cover no-repeat;
    /* خطر: المختصرة أعلاه تعيد تعيين background-color إلى transparent!
       اللون #1a1a2e ذهب. إذا فشل تحميل hero.jpg،
       ستكون الخلفية شفافة، وليست أزرق داكن. */
}

/* نهج أكثر أمانا */
.element {
    background: #1a1a2e url("hero.jpg") center / cover no-repeat;
    /* ضمّن اللون الاحتياطي في المختصرة نفسها */
}

/* أو استخدم التفصيلية لتغيير ما تحتاجه فقط */
.element {
    background-color: #1a1a2e;
    background-image: url("hero.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

تعليقات CSS

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

/* هذا تعليق من سطر واحد */

/*
   هذا تعليق متعدد الأسطر.
   يمكن أن يمتد على عدة أسطر كما تحتاج.
   مفيد للشروحات الأطول.
*/

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #1a1a2e; /* أزرق داكن -- يطابق إرشادات العلامة التجارية */
    padding: 15px 30px;
    z-index: 1000; /* يجب أن يبقى فوق تراكبات النوافذ المنبثقة (z-index: 999) */
}

أنواع التعليقات ومتى تستخدمها

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

/* ============================================================
   تعليقات رأس القسم
   تستخدم لتقسيم ورقة الأنماط إلى أقسام رئيسية.
   تسهل العثور على الكود بـ Ctrl+F / Cmd+F.
   ============================================================ */

/* --- تعليق القسم الفرعي ---
   يقسم القسم إلى مجموعات منطقية أصغر */

/* تعليق مضمّن مختصر يشرح قرارا محددا */
.nav-link {
    padding: 8px 16px;
    white-space: nowrap; /* منع التفاف نص الرابط إلى سطرين */
}

/* TODO: إعادة هيكلة هذا القسم عند اكتمال نظام التصميم الجديد */

/* HACK: حل بديل لخلل flexbox gap في Safari.
   إزالة عندما يصبح Safari 16+ لديه حصة سوقية أغلبية.
   انظر: https://bugs.webkit.org/show_bug.cgi?id=XXXXX */
.flex-container > * + * {
    margin-left: 16px;
}

/* DEPRECATED: أنماط زر قديمة -- استخدم .btn-primary بدلا من ذلك */
.old-button {
    background: gray;
}

/*
   DEBUG: تعطيل هذه القاعدة مؤقتا لاختبار التخطيط
   .sidebar {
       width: 300px;
       float: left;
   }
*/

/* @FIXME: هذا ينكسر على الشاشات الأضيق من 320px */

نمط جدول المحتويات

لأوراق الأنماط الكبيرة، جدول المحتويات في الأعلى لا يقدر بثمن:

/* ============================================================
   جدول محتويات ورقة الأنماط
   ============================================================
   1. خصائص CSS المخصصة (المتغيرات)
   2. إعادة التعيين / التطبيع
   3. الطباعة الأساسية
   4. نظام التخطيط
   5. الرأس والتنقل
   6. قسم البطل
   7. أقسام المحتوى
   8. البطاقات والمكونات
   9. النماذج والمدخلات
   10. الأزرار
   11. التذييل
   12. فئات الأدوات المساعدة
   13. الرسوم المتحركة
   14. استعلامات الوسائط
   ============================================================ */

/* ============================================================
   1. خصائص CSS المخصصة
   ============================================================ */
:root {
    --color-primary: #1a1a2e;
    --color-accent: #e94560;
    --font-body: "Inter", sans-serif;
    --spacing-unit: 8px;
}

/* ============================================================
   2. إعادة التعيين / التطبيع
   ============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ... الأقسام المتبقية ... */

لا توجد صيغة تعليق سطر واحد

على عكس JavaScript أو Python أو معظم لغات البرمجة، CSS لا تدعم تعليقات السطر الواحد بـ //. إذا كتبت // هذا تعليق في CSS، لن يعامل كتعليق. بدلا من ذلك، سيحاول المتصفح تفسيره كخاصية CSS -- وبما أن // ليست خاصية صالحة، ستولد خطأ تحليل يمكن أن يسبب سلوكا غير متوقع.

/* صحيح -- هذا تعليق CSS صالح */
.box { color: blue; }

// خطأ -- هذا ليس تعليقا في CSS!
// المتصفح يرى هذا كـ CSS غير صالح وقد
// يتخطى القواعد التالية أيضا.
.box { color: red; }

/* إذا كنت قادما من JavaScript، كن حذرا!
   استخدم دائما صيغة النجمة-الشرطة المائلة في CSS. */

التعامل مع المسافات البيضاء في CSS

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

/* النمط 1: موسع (موصى به للتطوير) */
.card {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* النمط 2: مدمج في سطر واحد */
.card { display: flex; flex-direction: column; background: white; border-radius: 8px; padding: 24px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

/* النمط 3: مصغر (بدون مسافات بيضاء على الإطلاق) */
.card{display:flex;flex-direction:column;background:white;border-radius:8px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,0.1)}

/* الثلاثة تنتج نفس النتيجة بالضبط في المتصفح */

إليك قواعد المسافات البيضاء التي يجب تذكرها:

• بين المحدد والقوس الفاتح -- المسافة اختيارية لكن موصى بها للقراءة (h1 { مقابل h1{).
• بين التصريحات -- فقط الفاصلة المنقوطة مهمة. يمكنك وضع كل تصريح في سطره الخاص (موصى به) أو في سطر واحد.
• داخل التصريح -- المسافة بعد النقطتين اختيارية لكن موصى بها (color: red مقابل color:red).
• داخل القيم -- بعض القيم تتطلب مسافات بيضاء محددة. مثلا، calc(100% - 20px) تحتاج المسافات حول علامة الناقص: calc(100%-20px) لا تعمل. دوال rgb() و hsl() في CSS الحديثة تقبل مسافات بدلا من الفواصل: rgb(255 0 0).
• في قوائم المحددات -- المسافات حول الفواصل اختيارية: h1, h2, h3 و h1,h2,h3 متكافئتان.

أخطاء بناء الجملة الشائعة وكيفية تجنبها

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

الخطأ 1: فاصلة منقوطة مفقودة

/* معطل -- فاصلة منقوطة مفقودة بعد "navy" */
h1 {
    color: navy
    font-size: 2rem;
    margin-bottom: 16px;
}
/* المتصفح يحاول قراءة "navy font-size: 2rem" كقيمة واحدة
   لخاصية color. هذا غير صالح، لذا يتجاهل
   كلا من تصريحي color و font-size.
   فقط margin-bottom: 16px ينطبق. */

/* مُصلح */
h1 {
    color: navy;
    font-size: 2rem;
    margin-bottom: 16px;
}

الخطأ 2: أقواس مفقودة أو غير متطابقة

/* معطل -- قوس إغلاق مفقود */
.header {
    background: #1a1a2e;
    color: white;
    padding: 20px;
/* المحلل لا يجد أبدا قوس الإغلاق لـ .header،
   لذا يستمر في القراءة. مجموعة القواعد التالية تصبح جزءا من
   كتلة تصريح .header، وتختل الأنماط. */

.main-content {
    max-width: 800px;
    margin: 0 auto;
}

/* مُصلح */
.header {
    background: #1a1a2e;
    color: white;
    padding: 20px;
}

.main-content {
    max-width: 800px;
    margin: 0 auto;
}

الخطأ 3: نقطتان مفقودة في التصريحات

/* معطل -- نقطتان مفقودة */
p {
    color red;
    font-size: 16px;
}
/* "color red" ليس تصريحا صالحا.
   المتصفح يتجاهله. font-size لا يزال يعمل. */

/* مُصلح */
p {
    color: red;
    font-size: 16px;
}

الخطأ 4: قيم غير صالحة

/* معطل -- قيم غير صالحة */
.box {
    color: 42;            /* اللون لا يمكن أن يكون رقما عاديا */
    margin: big;          /* "big" ليست قيمة طول صالحة */
    font-size: purple;    /* لا يمكن استخدام اسم لون لحجم الخط */
    width: 100;           /* وحدة مفقودة -- يجب أن تكون 100px أو 100% */
    padding: -20px;       /* الحشو لا يمكن أن يكون سالبا */
    z-index: 3.5;         /* z-index يجب أن يكون عددا صحيحا */
}
/* كل تصريح غير صالح يتم تجاهله بشكل فردي.
   التصريحات الصالحة في نفس القاعدة لا تزال تنطبق. */

/* مُصلح */
.box {
    color: #333333;
    margin: 20px;
    font-size: 16px;
    width: 100%;
    padding: 20px;
    z-index: 3;
}

الخطأ 5: أخطاء إملائية في أسماء الخصائص

/* معطل -- أخطاء إملائية في أسماء الخصائص */
.text {
    colour: red;          /* إملاء بريطاني -- CSS تستخدم "color" الأمريكية */
    font-sie: 16px;       /* خطأ إملائي في "font-size" */
    marin-bottom: 20px;   /* خطأ إملائي في "margin-bottom" */
    backgroud: white;     /* خطأ إملائي في "background" */
    trasition: all 0.3s;  /* خطأ إملائي في "transition" */
}
/* جميعها يتم تجاهلها بصمت */

/* مُصلح */
.text {
    color: red;
    font-size: 16px;
    margin-bottom: 20px;
    background: white;
    transition: all 0.3s;
}

معالجة أخطاء CSS: كيف تتعامل المتصفحات مع CSS غير الصالحة

فهم كيف تتعامل المتصفحات مع الأخطاء أمر بالغ الأهمية لتصحيح الأخطاء ولكتابة CSS قوية تعمل عبر متصفحات وإصدارات مختلفة. المبدأ الأساسي بسيط: المتصفحات تتخطى ما لا تفهمه. هذا السلوك هو في الواقع مقصود بالتصميم وهو أساسي لكيفية تطور CSS بمرور الوقت.

قواعد استرداد أخطاء CSS

• تصريح غير صالح -- إذا كان التصريح يحتوي على خاصية غير معروفة أو قيمة غير صالحة، فقط ذلك التصريح الواحد يتم تجاهله. التصريحات الأخرى في نفس مجموعة القواعد لا تزال تنطبق بشكل طبيعي.
• محدد غير صالح -- إذا لم يكن المحدد قابلا للتحليل، مجموعة القواعد بأكملها (بما في ذلك جميع تصريحاتها) يتم تجاهلها. هذا أشد من تصريح غير صالح.
• قوس غير مغلق -- إذا لم يتم إغلاق قوس فاتح أبدا، سيحاول المحلل إيجاد قوس إغلاق، مما قد يستهلك مجموعات القواعد اللاحقة. هذا أكثر أنواع الأخطاء تدميرا.
• تعليق غير مغلق -- إذا لم يتم إغلاق /* أبدا بـ */، كل شيء بعده حتى نهاية الملف (أو */ التالي الذي يجده) يعامل كتعليق. هذا يمكن أن يعطل أجزاء كبيرة من ورقة الأنماط بصمت.

/* توضيح استرداد أخطاء CSS */
.box {
    color: navy;              /* صالح -- ينطبق */
    font-size: huge;          /* قيمة غير صالحة -- يتم تجاهله */
    padding: 20px;            /* صالح -- ينطبق */
    margin: red;              /* قيمة غير صالحة للهامش -- يتم تجاهله */
    background: #f5f5f5;      /* صالح -- ينطبق */
    bordre: 1px solid #ccc;   /* اسم خاصية غير صالح -- يتم تجاهله */
    border-radius: 8px;       /* صالح -- ينطبق */
}

/* النتيجة: عنصر .box يحصل على:
   color: navy;
   padding: 20px;
   background: #f5f5f5;
   border-radius: 8px;

   التصريحات الثلاثة غير الصالحة يتم تخطيها بصمت.
   لا أخطاء تظهر على الشاشة. لا أخطاء في وحدة التحكم في معظم المتصفحات.
*/

لماذا هذا السلوك مفيد

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

/* هذا CSS يعمل في جميع المتصفحات، القديمة والجديدة */
.container {
    display: block;          /* احتياطي للمتصفحات القديمة */
    display: flex;           /* المتصفحات الحديثة تستخدم هذا */
    display: grid;           /* أحدث المتصفحات تستخدم هذا */
    gap: 20px;               /* فقط متصفحات Grid/Flex تطبق هذا */
    width: 90%;              /* عرض احتياطي */
    width: clamp(300px, 90%, 1200px); /* المتصفحات الحديثة تستخدم هذا */
}

/* المتصفحات القديمة: display: block, width: 90%
   المتصفحات الحديثة: display: grid, width: clamp(...), gap: 20px

   لا أخطاء في أي مكان. كل من المتصفحات القديمة والجديدة
   تعرض شيئا قابلا للاستخدام. */

القيم الصالحة مقابل غير الصالحة في CSS

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

/* كلمات مفتاحية -- كلمات محددة مسبقا بمعان محددة */
.element {
    display: flex;                /* flex, block, inline, grid, none, إلخ */
    position: relative;           /* static, relative, absolute, fixed, sticky */
    text-align: center;           /* left, right, center, justify */
    font-weight: bold;            /* normal, bold, lighter, bolder */
    overflow: hidden;             /* visible, hidden, scroll, auto */
}

/* أطوال -- أرقام بوحدات */
.element {
    width: 300px;                 /* بكسلات */
    height: 50vh;                 /* نسبة ارتفاع نافذة العرض */
    font-size: 1.25rem;           /* وحدات em الجذرية */
    margin: 2em;                  /* وحدات em (نسبية لحجم خط الأب) */
    padding: 5%;                  /* نسبة من عرض الأب */
    border-width: 0.5mm;          /* ملليمترات (للطباعة) */
    gap: 1.5vw;                   /* نسبة عرض نافذة العرض */
}

/* ألوان -- عدة تنسيقات متاحة */
.element {
    color: red;                   /* لون مسمى (147 اسما متاحا) */
    color: #ff0000;               /* ست عشري (6 أرقام) */
    color: #f00;                  /* ست عشري (3 أرقام مختصرة) */
    color: #ff000080;             /* ست عشري مع شفافية (8 أرقام) */
    color: rgb(255, 0, 0);        /* دالة RGB */
    color: rgba(255, 0, 0, 0.5);  /* RGB مع شفافية */
    color: hsl(0, 100%, 50%);     /* HSL (صبغة، تشبع، إضاءة) */
    color: hsla(0, 100%, 50%, 0.5); /* HSL مع شفافية */
}

/* دوال -- قيم تحسب نتائج */
.element {
    width: calc(100% - 40px);             /* حساب رياضي */
    background: url("image.jpg");          /* مرجع URL */
    background: linear-gradient(to right, #333, #666); /* تدرج */
    transform: rotate(45deg) scale(1.2);   /* دوال تحويل */
    filter: blur(4px) brightness(1.1);     /* دوال مرشح */
    color: var(--primary-color);           /* مرجع متغير CSS */
    width: min(90%, 1200px);               /* أدنى قيمتين */
    font-size: clamp(14px, 2vw, 22px);    /* نطاق محصور */
}

/* أرقام (بدون وحدة) -- بعض الخصائص تقبل أرقاما عادية */
.element {
    opacity: 0.8;          /* 0 إلى 1، بدون وحدة */
    z-index: 100;          /* عدد صحيح، بدون وحدة */
    flex-grow: 2;           /* رقم، بدون وحدة */
    line-height: 1.6;      /* نسبة بدون وحدة (مفضلة لارتفاع السطر) */
    order: -1;              /* عدد صحيح، بدون وحدة */
}

تجميع كل شيء معا: مثال مجموعة قواعد كامل

لنلق نظرة على مثال واقعي يتضمن كل ما تعلمناه -- مجموعات قواعد متعددة، محددات مجمعة، خصائص مختصرة، خصائص تفصيلية، تعليقات، وتنسيق مناسب:

/* ============================================================
   أنماط مكون البطاقة
   مكون بطاقة قابل لإعادة الاستخدام لمقالات المدونة والمنتجات وغيرها.
   ============================================================ */

/* بنية البطاقة الأساسية */
.card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* تأثير التحويم على البطاقة */
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* صورة البطاقة */
.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* منطقة محتوى نص البطاقة */
.card-body {
    padding: 20px;
    flex: 1; /* مختصرة لـ flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
}

/* عنوان ووصف البطاقة يتشاركان الطباعة */
.card-title,
.card-description {
    font-family: "Inter", -apple-system, sans-serif;
    line-height: 1.5;
}

/* أنماط العنوان والنص الفردية */
.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 8px;  /* تفصيلية -- تعيين الهامش السفلي فقط */
}

.card-description {
    font-size: 0.95rem;
    color: #718096;
    margin-bottom: 16px;
}

/* تذييل البطاقة مع أزرار الإجراءات */
.card-footer {
    padding: 16px 20px;        /* مختصرة: أعلى/أسفل | يسار/يمين */
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* TODO: إضافة أنماط متغير الوضع الداكن */
/* TODO: إضافة متغير تخطيط .card--horizontal */

.nav-link {
    display: inline-block;
    padding: 8px 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 6px;
    font: 600 14px/1 "Inter", sans-serif;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    line-height: 1.2;
    color: #1a202c;
    margin: 0 0 0.5em;
}

.hero-section {
    background-colour: #1a1a2e
    color white;
    padding; 60px 20px;
    text-align: centre;
    font-size: 18px
    line-height: 1.8;
    max-width: 100%
}

.hero-section h1 {
    font-size: 3rem
    font-weight: 900;
    margin-bottom: 20
    colour: #ffffff;

.hero-section p {
    font-size: big;
    color: #cccccc;
    max-width: 700px;
    margin: 0 auto;
}

.box {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 20px;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    border-width: 2px;
    border-style: dashed;
    border-color: #e94560;
    background-color: #f5f5f5;
    background-image: url("bg-pattern.png");
    background-repeat: repeat-x;
    background-position: top center;
}

.text {
    font: italic 700 18px/1.6 Georgia, serif;
    margin: 20px 40px;
    border: 3px dotted #333;
    transition: all 0.3s ease-in-out 0.1s;
}