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