لقد كانت أفكاري حول إطار عمل CSS ووحدات CSS غامضة دائمًا، وأنا أتبع هذا الاتجاه تمامًا. المشاكل التي واجهتها في العمل مؤخراً أجبرتني على الاهتمام بهذه المشكلة. لقد اعتدت على قيام شخص واحد بكل شيء، التخطيط والتصميم والنشر. عندما يتطلب المشروع عدة أشخاص للتعاون وإكماله في وقت قصير، فإن تخطيط ملفات الأنماط والتفكير في وحدات CSS وأطر العمل يكون له أهمية خاصة.
لقد أزعجني السؤال التالي مؤخرًا: إذا كان العديد من الأشخاص يعملون في مكتب الاستقبال لموقع ويب في نفس الوقت، فكيف يتم توزيعهم بحيث يكون نمط موقع الويب بأكمله موحدًا، وتكون بنية ملف النمط معقولة، وهناك لا الازدواجية والتكرار، والكفاءة هي الأعلى؟ لقد استشرت العديد من زملائي في الفصل، وتتلخص الإجابات التي حصلت عليها على النحو التالي: فيما يتعلق بتوحيد الأسلوب، ناقشنا معًا عمل رسم تخطيطي أولاً، وقام شخص واحد بإنشاء صفحة نمطية قياسية بناءً على الرسم التخطيطي، ثم بدأنا العمل معًا، والباقي كان تعديلا مستمرا. من حيث الإنتاج، يتم تعيين عدة ملفات CSS مختلفة للموقع بأكمله، ويكون كل شخص مسؤولاً عن ملفات ذات أنماط مختلفة.
ما يسهل قوله ليس سهلاً بمجرد تنفيذه. عندما يتعلق الأمر بالتصميم، ما زلت لا أجرؤ على المخاطرة، ولحسن الحظ، لا يوجد عدد كبير من الصفحات، حيث يوجد أقل من 20 صفحة من المستوى الأول والثاني، ويمكن لشخص واحد التعامل معها. أخبرنا عن عملية الإنتاج.
(1) توحيد تسمية CSS وترتيب الكتابة والتعليقات.
ناهيك عن أهمية هذه النقطة، فمن الصعب أن نتخيل مدى الارتباك الذي قد يحدث عند ظهور عدة طرق تسمية "مخصصة بشدة" في ورقة أنماط في نفس الوقت. يمكن أن تستخدم التسمية اتصال الرمز الأوسط "-"، "_"، مثل مربع النص، أو محتوى النص، أو مربع النص، أو كتابة "حالة الحدبة" بالأحرف الكبيرة والصغيرة، أو مربع النص، أو محتوى النص، وما إلى ذلك. التعليقات مهمة للغاية ويمكن تقسيمها إلى ثلاثة مستويات. يتم استخدام الفئات الرئيسية للتعليقات لتقسيم كتل CSS، مثل التعليقات التوضيحية للرأس والحاوية والتذييل مشروحة داخل محدد استخدم التعليقات أو قم باختراق التعليقات على بعض المؤثرات الخاصة. يمكن لتنسيق الكتابة استخدام المسافة البادئة الأفقية لإظهار العلاقات الهرمية.
(2) تحديد التقسيم الهيكلي لورقة الأنماط بناءً على العروض
هناك العديد من المقدمات على الإنترنت حول تقسيم بنية ملفات CSS، والتي تكون بشكل عام مجرد عدد قليل من الملفات: Layout.css/main.css/footer.css/header.css/reset.css، وما إلى ذلك، الجميع يقول أنهم كذلك جيد في ذلك وممارسته، ليس هناك الأفضل، فقط الأنسب. يجب أن يعتمد تقسيم الأسلوب الأفضل بشكل وثيق على بنية HTML نفسها، بدلاً من أن يكون عالميًا.
بالإضافة إلى تسهيل تقسيم العمل والتعاون في المستقبل، فإن توزيع ملفات CSS له أيضًا نقطة مهمة جدًا: إذا كانت البايتات صغيرة، فيمكن ضغطها قدر الإمكان لتقليل عدد الاتصالات المتزامنة إذا كانت البايتات أيضًا كبيرة الحجم، ويمكن تقسيمها لمنع سرعة التنزيل من أن تكون بطيئة للغاية، مما يؤثر على نمط التحميل. هذه قضايا محددة يجب التعامل معها على أساس كل حالة على حدة. على سبيل المثال، بالنسبة للصفحات التي تكثر زيارتها مثل محركات البحث والصفحات الرئيسية للبوابة، فمن الأفضل كتابة css داخل الصفحة.
حدد بشكل مبدئي بنية نمط CSS:
مثال كود المصدر
Reset.css /*إعادة شحن نمط الصفحة*/
header.css /*نمط الرأس على مستوى الموقع*/
footer.css /*نمط التذييل الكامل للموقع*/
public.css /*نمط الوحدة العامة للموقع بأكمله*/
Index.css /*النمط الفريد للصفحة الرئيسية*/
Container.css /*المستوى الثاني وما دونه من أنماط الجسم*/
print.css /*نمط الطباعة*/
ie.css /*اختراق IE*/
(3) تقسيم العمل والتعاون
تم إعداد المسرح وسيبدأ الغناء. ابحث عن جميع قوائم النصوص العامة وقوائم الصور والنص المختلطة. شخص واحد مسؤول عن الكتابة في الوحدة العامة، وشخص واحد عن الرأس والذيل، وشخص واحد عن إطار الصفحة الثانوية. يتم ترك الجزء المخصص حتى النهاية.
لا تزال هناك العديد من المشاكل في التشغيل الفعلي ولا يمكن تجنب تكرار التعليمات البرمجية ولا يمكن إلا التقليل منها. في بعض الأحيان يجب تقديم التضحيات حتى تكون فعالة.