ما هي الفاصلة في محددات CSS؟

لماذا تبسط الفاصلة البسيطة الترميز

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

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

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

الفاصلة و CSS

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

على سبيل المثال ، دعنا ننظر إلى بعض CSS أدناه.

ال {اللون: الأحمر؛ }
td {لون: أحمر؛ }
p .red {color: red؛ }
div # firstred {color: red؛ }

باستخدام بناء الجملة هذا ، أنت تقول أنك تريد علامات th وعلامات td وعلامات فقرة باللون الأحمر ، وعلامة div ذات المعرف أولاً كل لون اللون الأحمر.

هذا ملف CSS مقبول تمامًا ، ولكن هناك نوعان من العوائق المهمة لكتابته بهذه الطريقة:

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

لتفادي هذه العوائق وتبسيط ملف CSS الخاص بك ، سنحاول استخدام الفواصل.

استخدام الفاصلة لفصل المحددات

بدلاً من كتابة 4 محددات CSS منفصلة و 4 قواعد ، يمكنك دمج كل هذه الأنماط في خاصية قاعدة واحدة عن طريق فصل المحددات الفردية بفاصلة. إليك كيف سيتم ذلك:

th، td، p.red، div # firstred {color: red؛ }

تعمل حرف الفاصلة بشكل أساسي ككلمة "و" داخل المحدد. لذلك ينطبق هذا على علامات t t وعلامات td وعلامات الفقرات مع فئة اللون الأحمر وعلامة div ذات المعرف الأول. هذا هو بالضبط ما كان لدينا من قبل ، ولكن بدلاً من الحاجة إلى قواعد CSS 4 ، لدينا قاعدة واحدة مع محددات متعددة. هذا هو ما تفعله الفاصلة في المحدد ، فهو يسمح لنا بأن يكون لدينا محددات متعددة في قاعدة واحدة.

لا يقتصر هذا النهج على إنشاء ملفات CSS أكثر تنظيماً ، بل يجعل التحديثات المستقبلية أكثر سهولة. الآن إذا أردت تغيير اللون من اللون الأحمر إلى اللون الأزرق ، فكل ما عليك فعله هو إجراء التغيير في مكان واحد بدلاً من القواعد الأصلية الأربعة التي اتبعناها! فكر في هذه التوفيرات في الوقت عبر ملف CSS بأكمله ويمكنك رؤية كيف سيوفر لك ذلك الوقت والمكان في رون الطويل!

تباين الصيغة

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

عشر،
الدفتيريا،
p.red،
شعبة # firstred
{
لون احمر؛
}

لاحظ أنك تضع فاصلة بعد كل محدد ، ثم تستخدم "أدخل" لكسر المحدد التالي في السطر الخاص به. أنت لا تضيف فاصلة بعد المحدد النهائي.

باستخدام الفواصل بين المحددات الخاصة بك ، يمكنك إنشاء ورقة أنماط أكثر تكسيلاً يسهل تحديثها في المستقبل والتي يسهل قراءتها اليوم!

المقالة الأصلية لجنيفر كرينين. حرره جيرمي جيرار في 5/8/17