بعد الانتهاء من عمل الواجهة الأمامية، ينسى الكثير من الناس هيكل المشروع وتفاصيله. ومع ذلك، لن يتم الانتهاء من الكود بالكامل على الفور، وستكون هناك أعمال صيانة مستمرة خلال الوقت المتبقي، وقد لا تكتمل هذه الأعمال بنفسك. لذلك، يمكن للتعليمات البرمجية جيدة التنظيم أن تعمل على تحسين قابلية صيانتها بشكل كبير. فيما يلي خمس طرق لتحسين إمكانية صيانة ملفات CSS، وهو دليل أفضل لأسلوب CSS.
1. قم بتقسيم أنماطك
بالنسبة للمشاريع الصغيرة، قبل كتابة التعليمات البرمجية، قم بتقسيم التعليمات البرمجية إلى عدة كتل وفقًا لبنية الصفحة أو محتوى الصفحة وإبداء التعليقات. على سبيل المثال، يمكنك فصل الأنماط العامة والتخطيطات وأنماط الخطوط والنماذج والتعليقات وغيرها إلى عدة كتل مختلفة لمواصلة العمل.
بالنسبة للمشاريع الكبيرة، من الواضح أن هذا لن يكون له أي تأثير. في هذه المرحلة، يجب تقسيم النمط إلى عدة ملفات أوراق أنماط مختلفة. تعد ورقة الأنماط الرئيسية أدناه مثالاً على هذا الأسلوب، وتتمثل مهمتها الرئيسية في استيراد ملفات أنماط أخرى. لا يؤدي استخدام هذه الطريقة إلى تحسين بنية النمط فحسب، بل يساعد أيضًا في تقليل بعض طلبات الخادم غير الضرورية. هناك العديد من الطرق لتحليل الملفات، وتستخدم ورقة الأنماط الرئيسية الطريقة الأكثر شيوعًا.
/*------------------------------------------------ ------------------ [ورقة الأنماط الرئيسية] |
وفي الوقت نفسه، بالنسبة للمشاريع الكبيرة، يمكنك أيضًا إضافة علامات ترقية لملفات CSS أو بعض إجراءات التشخيص، والتي لن يتم تفصيلها هنا.
2. إنشاء فهرس ملف CSS
من أجل فهم بنية ملف CSS بأكمله بسرعة، يعد إنشاء فهرس ملف في بداية الملف خيارًا جيدًا. إحدى الطرق الممكنة هي بناء فهرس على شكل شجرة: يمكن أن يصبح المعرف الهيكلي والفئة فرعًا من الشجرة. على النحو التالي:
| /*------------------------------------------------ ------------------ [تَخطِيط] * جسم + رأس / #رأس + المحتوى / #المحتوى - العمود الأيسر / #leftcolumn - العمود الأيمن / #العمود_الأيمن - الشريط الجانبي / #الشريط الجانبي - آر إس إس / #rss - بحث / #بحث - الصناديق / .بوكس - المدونة الجانبية / #المدونة الجانبية + تذييل / #تذييل التنقل #navbar إعلانات .إعلانات رأس المحتوى h2 —————————————————————-*/ |
أو يمكن القيام بذلك أيضًا:
/*------------------------------------------------ ------------------ [جدول المحتويات] -------------------------------------------------- ------------------*/ |
هناك طريقة أخرى وهي ببساطة إدراج المحتوى أولاً، بدون مسافة بادئة. في المثال أدناه، إذا كنت تريد الانتقال إلى قسم RSS، فما عليك سوى البحث عن 8.RSS.
/*------------------------------------------------ ------------------ [جدول المحتويات] -------------------------------------------------- ------------------*/ /*------------------------------------------------ ------------------ |
يمكن أن يؤدي تحديد نمط البحث هذا إلى تسهيل قراءة التعليمات البرمجية الخاصة بك وتعلمها على الآخرين بشكل فعال. عند العمل على مشاريع كبيرة، يمكنك أيضًا طباعة البحث لسهولة الرجوع إليه عند قراءة الكود.