دور الفاصلة في بناء جملة محدد CSS

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

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

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

الفواصل و CSS

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

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

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

بهذه الصيغة ، أنت تقول أنك تريد العاشر العلامات td العلامات ، وعلامات الفقرة بالفئة الحمراء ، وعلامة div ذات المعرف أولاً ، يجب أن يكون لون النمط أحمر.

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

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

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

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

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

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

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

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

الاختلاف النحوي

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

العاشر،
الدفتيريا ،
ص الأحمر ،
div # firstred
{
لون احمر؛
} 

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

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