لا تقتصر على فئة CSS واحدة لكل عنصر.
تتيح لك Cascading Style Sheets (CSS) تحديد مظهر العنصر عن طريق ربطه بالسمات التي تقوم بتطبيقها على هذا العنصر. يمكن أن تكون هذه السمات ومعرف أو فئة ، وعلى غرار جميع السمات ، فإنها تضيف معلومات مفيدة إلى العناصر التي يتم إرفاقها بها. استنادًا إلى السمة التي تضيفها إلى عنصر ما ، يمكنك كتابة محدد CSS لتطبيق الأنماط المرئية الضرورية اللازمة لتحقيق الشكل والمظهر لهذا العنصر والموقع ككل.
في حين تعمل إما معرفات أو فصول دراسية لغرض ربطها بقواعد CSS ، فإن أساليب تصميم الويب الحديثة تفضل الطبقات على المعرفات ، جزئيًا ، لأنها أقل تحديدًا وأسهل في العمل بشكل عام. نعم ، سيظل بإمكانك العثور على العديد من المواقع التي تستخدم معرّفات ، ولكن هذه السمات يتم تطبيقها بشكل أكثر تكرارا مما كانت عليه في الماضي في حين استحوذت الصفوف على صفحات الويب الحديثة.
واحد أو فئات متعددة في CSS؟
في معظم الحالات ، تقوم بتعيين سمة فئة واحدة لعنصر ، ولكنك في الواقع لا تقتصر على فئة واحدة فقط كما هي الحال مع المعرفات. على الرغم من أن العنصر لا يمكن أن يحتوي إلا على خاصية المعرف المفرد ، إلا أنه يمكنك بكل تأكيد منح عنصر متعدد الطبقات ، وفي بعض الحالات ، يؤدي ذلك إلى تسهيل عملية تصفيف صفحتك وزيادة مرونتها.
إذا كنت تحتاج إلى تعيين فئات متعددة لعنصر ، يمكنك إضافة فئات إضافية وفصلها ببساطة بمسافة في السمة الخاصة بك.
على سبيل المثال ، تحتوي هذه الفقرة على ثلاث فئات:
pullquote featured left "> سيكون هذا هو نص الفقرة
هذا بتعيين الفئات الثلاث التالية في علامة الفقرة:
- سحب الاقتباس
- متميز
- اليسار
لاحظ المسافات بين كل واحدة من قيم الصف هذه. هذه المساحات هي ما يميزها كفئات فردية مختلفة. ولهذا السبب أيضًا لا يمكن أن تحتوي أسماء الفئات على مسافات ، نظرًا لأن ذلك سيؤدي إلى تعيينها كفئات منفصلة.
على سبيل المثال ، إذا استخدمت "pullquote-featured-left" بدون مسافة ، فستكون قيمة فئة واحدة ، ولكن المثال أعلاه ، حيث يتم فصل هذه الكلمات الثلاث بمسافة ، يتم تعيينها كقيم فردية. من المهم أن تفهم هذا المفهوم عند تحديد قيم الصف التي يجب استخدامها على صفحات الويب الخاصة بك.
بعد حصولك على قيم صفك في HTML ، يمكنك تعيينها كصفوف في CSS وتطبيق الأنماط التي تريد إضافتها. فمثلا.
.سحب الاقتباس { ... }
.متميز { ... }
p.left {...}
في هذه الأمثلة ، تكون أزواج CSS وأزواج القيم داخل الأقواس المتعرجة ، وهي الطريقة التي سيتم بها تطبيق هذه الأنماط على المحدد المناسب.
ملاحظة - إذا قمت بتعيين فئة إلى عنصر معين (على سبيل المثال ، p.left) ، فلا يزال بإمكانك استخدامه كجزء من قائمة الفئات ؛ ومع ذلك ، يجب أن تدرك أنها ستؤثر فقط على العناصر المحددة في CSS. بمعنى آخر ، لن يتم تطبيق نمط p.left إلا على الفقرات التي تحتوي على هذه الفئة نظرًا لأن المحدد الذي حددته هو تطبيقه بالفعل على "الفقرات ذات القيمة class لقيمة" left "". على النقيض من ذلك ، لا يحدد المحددان الآخران في المثال عنصرًا معينًا ، بحيث يتم تطبيقهما على أي عنصر يستخدم قيم الفئات هذه.
مزايا فئات متعددة
يمكن أن تيسر الطبقات المتعددة إضافة تأثيرات خاصة إلى العناصر دون الحاجة إلى إنشاء نمط جديد تمامًا لهذا العنصر.
على سبيل المثال ، قد ترغب في الحصول على إمكانية تعويم العناصر إلى اليسار أو اليمين بسرعة. قد تكتب فصلين إلى اليسار واليمين مع العوم فقط: اليسار ؛ وطفو: حق ؛ فيهم. ثم ، كلما كان لديك عنصر تحتاج إلى طفو يسار ، يمكنك ببساطة إضافة الفئة "يسار" إلى قائمة الصف.
هناك خط رفيع للمشي هنا ، ولكن. تذكر أن معايير الويب تملي الفصل بين النمط والبنية. يتم التعامل مع الهيكل عبر HTML بينما يكون النمط في CSS.
إذا كان مستند HTML الخاص بك مليئًا بالعناصر التي تحتوي جميعها على أسماء فئات مثل "أحمر" أو "يسار" ، وهي أسماء تحدد كيف يجب أن تبدو العناصر بدلاً من ما هي عليه ، فإنك تقوم بتجاوز هذا الخط بين البنية والنمط. أحاول تحديد أسماء الفئات غير الدلالية قدر الإمكان لهذا السبب.
فئات متعددة ، وعلم الدلالة ، وجافا سكريبت
ميزة أخرى لاستخدام فئات متعددة هي أنه يمنحك الكثير من إمكانات التفاعل.
يمكنك تطبيق فئات جديدة على العناصر الموجودة باستخدام JavaScript دون إزالة أي من الفئات الأولية. يمكنك أيضًا استخدام الفئات لتحديد دلالات عنصر ما . هذا يعني أنه يمكنك إضافة فصول إضافية لتعريف معنى هذا العنصر لغوياً. هكذا تعمل تنسيقات Microformat.
مساوئ الطبقات المتعددة
أكبر عائق لاستخدام فئات متعددة على العناصر الخاصة بك هو أنه يمكن أن يجعلها غير عملية قليلاً للتحكم وإدارتها بمرور الوقت. قد يصعب تحديد الأنماط التي تؤثر على عنصر وإذا كانت هناك أي نصوص مؤثرة عليها. العديد من الأطر المتاحة اليوم ، مثل Bootstrap ، تجعل الاستخدام المكثف للعناصر ذات الطبقات المتعددة. يمكن أن يخرج هذا الرمز عن السيطرة ويصعب العمل معه بسرعة كبيرة إذا لم تكن حذراً.
عند استخدامك لفئات متعددة ، فإنك تخاطر أيضًا بتجاوز النمط لطبقة واحدة لتجاوز نمط آخر حتى إذا لم تكن تنوي ذلك. يمكن أن يجعل ذلك من الصعب معرفة السبب في عدم تطبيق أنماطك حتى عندما يبدو أنها يجب أن تكون.
يجب أن تكون على دراية بالتحديد ، حتى مع الخصائص المطبقة على عنصر واحد!
باستخدام أداة مثل أدوات مشرفي المواقع في Chrome ، يمكنك بسهولة معرفة كيف تؤثر الفصول الدراسية على أنماطك وتجنب هذه المشكلة المتعلقة بالأنماط المتعارضة والسمات.
المقالة الأصلية لجنيفر كرينين. حرره جيريمي جيرارد في 8/7/17