كتابة CSS هي عملية بسيطة ومباشرة ، فلماذا يتطلب ذلك مزيدًا من المبادئ وأفضل الممارسات؟
مع زيادة حجم المشروع وعدد الأشخاص الذين يعملون عليه ، بدأت تظهر صعوبات جديدة بشكل أكثر وضوحا يمكن أن تسبب مشاكل خطيرة في المستقبل. تكرار التعليمات البرمجية ، وسلاسل إعادة تعريف الخاصية المعقدة ، باستخدام! CSS ، خصائص هامة وبقية وغير مستخدمة من عناصر HTML البعيدة ، وهكذا. هذا الرمز هو أكثر صعوبة في القراءة والإصلاح.
إن كتابة CSS بطريقة احترافية ستجعل الكود أكثر قابلية للصيانة وقابلية للتمديد ومفهومة ونظيفة. دعنا نلقي نظرة على 5 مبادئ بسيطة وفعالة تنقل CSS إلى المستوى التالي.
تسمية مبدأ
"في علوم الكمبيوتر ، هناك شيئان معقدان فقط: إبطال ذاكرة التخزين المؤقت والتسمية" - Phil Carleton
تُعد تسمية ومحددات محددات CSS بشكل صحيح هي الخطوة الأولى لجعل CSS أكثر قابلية للقراءة ومنظومة ونظيفة. تحديد القواعد والقيود في اصطلاح التسمية يجعل الشفرة موحدة وموثوقة وسهلة الفهم.
هذا هو السبب في أن مفاهيم مثل
BEM (Block-Element-Modifier) و
SMACSS (بنية قابلة للتطوير ووحدات نمطية لـ CSS) و
OOCSS (C Oriented Oriented CSS) شائعة بين العديد من مطوري الواجهة الأمامية.
مبدأ خصوصية منخفض
يعد تجاوز خصائص CSS مفيدًا للغاية ، ولكن في المشروعات الأكثر تعقيدًا ، يمكن للأشياء أن تخرج عن السيطرة بسرعة إلى حد ما. يمكن أن تصبح سلاسل التجاوز طويلة ومعقدة للغاية ، مما سيجبرك على استخدام
!important لحل مشاكل الخصوصية ، والتي يمكن أن تضيع بسهولة عند تصحيح الأخطاء أو إضافة وظائف جديدة
.card {} .card .title {} .blog-list .card img {} .blog-list .card.featured .title {} #js-blog-list .blog-list .card img {}
متصفح وخصوصية
أحد فوائد اتباع مبدأ الخصوصية المنخفضة هو الأداء. تحليل المتصفحات CSS
من اليمين إلى اليسار .
دعنا نلقي نظرة على المثال التالي:
.blog-list .card img {}
سوف "تقرأ" المستعرضات على النحو التالي:
- ابحث عن جميع العلامات <img> في الصفحة
- من بينها ، حدد العناصر التي هي أحفاد الفئة .card
- من بينها ، حدد العناصر التي هي من نسل فئة قائمة المدونات
يمكنك أن ترى كيف يؤثر المحددون ذوو الخصوصية العالية على الأداء ، خاصةً عندما نحتاج إلى اختيار عنصر مشترك عالميًا مثل
div ،
img ،
li ، إلخ.
باستخدام نفس المستوى من الخصوصية
باستخدام محددات CSS ذات الخصوصية المنخفضة المقترنة بمنهجية BEM أو أحد مبادئ التسمية الأخرى المذكورة في القسم السابق ، يمكننا إنشاء رمز قوي ومرن وسهل الفهم.
لماذا استخدام فصول CSS؟ نريد الالتزام بنفس المستوى من الخصوصية ، مع الحفاظ على المرونة وقادرة على تحديد عناصر متعددة. لا توفر محددات العناصر ومحددات الهوية المرونة التي نحتاجها.
دعنا نعيد كتابة المثال السابق باستخدام BEM والتمسك بخصوصية منخفضة.
.card {} .card__title {} .blogList__image {} .blogList__title--featured {} .blogList__img--special {}
يمكنك معرفة كيف تكون هذه المحددات أكثر بساطة ووضوحًا ويمكن إعادة تعريفها وتوسيعها بسهولة إذا لزم الأمر. والحفاظ على خصوصية منخفضة (الفئة الوحيدة) ، ونحن نضمن الأداء الأمثل والمرونة.
مبدأ الجاف
يمكن أيضًا تطبيق مبدأ DRY (لا تكرر نفسك ، روس. لا تتكرر) على CSS. يمكن أن يؤدي الازدواجية في CSS إلى ازدهار الشفرة وتجاوزات غير ضرورية ودعم رديء وما إلى ذلك. يمكن إصلاح هذه المشكلة باستخدام بنية رمز مناسبة ووثائق الجودة.
Storybook هي أداة مجانية رائعة تتيح لك إنشاء نظرة عامة على مكونات واجهة الويب المتاحة وكتابة وثائق الجودة.
.warningStatus { padding: 0.5rem; font-weight: bold; color: #eba834; } .errorStatus { padding: 0.5rem; font-weight: bold; color: #eb3d34; } .form-errorStatus { padding: 0.5rem 0 0 0; font-weight: bold; color: #eb3d34; }
دعونا refactor التعليمات البرمجية التالية مبدأ DRY
.status { padding: 0.5rem; font-weight: bold; } .status--warning { color: #eba834; } .status--error { color: #eb3d34; } .form__status { padding: 0.5rem 0 0 0; }
مبدأ المسؤولية الوحيدة
باستخدام مبدأ المسؤولية الوحيد في CSS ، يمكنك التأكد من أن فئات CSS قابلة للمد بسهولة وإعادة تعريف. لنلقِ نظرة على المثال التالي
.button { padding: 1rem 2rem; font-size: 2rem; border-radius: 0.2rem; background-color: #eb4934; color: #fff; font-weight: bold; } .button--secondary { border-radius: 0; font-size: 1rem; background-color: #888; }
يمكن ملاحظة أنه إذا كنت بحاجة إلى توسيع فئة
.button باستخدام المعدل
.button - الثانوي ، فسيتعين عليك إجراء العديد من التخطيات ، على الرغم من أننا نريد فقط تغيير لون الخلفية ، مع الحفاظ على الأنماط الافتراضية.
المشكلة هي أن فصلنا .button له عدة أدوار:
- يحدد نموذج الكتلة ( الحشو )
- يعرف الطباعة ( حجم الخط ، وزن الخط )
- يحدد المظهر ( اللون ، لون الخلفية ، دائرة نصف قطرها الحدود )
هذا يعقد تمديد فئة CSS وتكاملها مع الفئات الأخرى. مع وضع ذلك في الاعتبار ، فلنحسن CSS باستخدام BEM و OOCSS.
.button { padding: 1rem 2rem; font-weight: bold; color: #fff; } .button--radialBorder { border-radius: 0.2rem; } .button--large { font-size: 2rem; } .button--primary { background-color: #eb4934; } .button--secondary { background-color: #888; }
لقد قمنا بتقسيم أنماط
الزر الخاص بنا إلى عدة فئات يمكن استخدامها لتوسيع الفئة الأساسية. إذا لزم الأمر ، يمكننا تطبيق المعدلات وإضافة عناصر جديدة عند تغيير التصميم أو إضافة عناصر جديدة
مبدأ الانفتاح / التقارب
يجب أن تكون كيانات البرامج (الفئات ، الوحدات ، الوظائف ، إلخ) مفتوحة للتمديد ، لكن يجب إغلاقها للتغيير "لقد استخدمنا بالفعل مبدأ الفتح / الإغلاق في الأمثلة السابقة. يجب إضافة جميع الميزات والخيارات الجديدة بالامتداد. لنلقِ نظرة على هذا المثال.
.card { padding: 1rem; } .blog-list .card { padding: 0.5em 1rem; }
يحتوي
محدد بطاقة .blog-list على العديد من المشكلات المحتملة:
- لا يمكن تطبيق بعض الأنماط إلا إذا كان عنصر .card هو عنصر تابع لقائمة .blog
- يتم فرض الأنماط على عنصر .card إذا تم وضعه في عنصر قائمة المدونات ، مما قد يؤدي إلى نتائج غير متوقعة وتجاوزات غير ضرورية
دعنا نعيد كتابة المثال السابق:
.card { padding: 1rem; } .blogList__card { padding: 0.5em 1rem; }
نحن نصلح المشكلة إذا استخدمنا محدد صف واحد. باستخدام هذا المحدد ، يمكننا تجنب التأثيرات غير المتوقعة وعدم استخدام أنماط متداخلة بشكل مشروط.
في الختام
نظرنا في أمثلة حول كيفية تطبيق هذه المبادئ البسيطة القليلة التي يمكن أن تحسن بشكل كبير من النهج لكتابة CSS:
- تسمية موحدة وهيكل ، قراءة أفضل باستخدام BEM ، OCSS ، إلخ.
- تحسين الأداء والهيكل باستخدام محددات خصوصية منخفضة
- انخفاض الانتفاخ وتحسين جودة الرمز باستخدام مبدأ DRY
- المرونة وسهولة الصيانة باستخدام مبدأ الفتح / الإغلاق
شكرا لأخذ الوقت الكافي لقراءة هذا المقال. إذا وجدت أنه مفيد ، يمكنك مشاركته أو ترك تعليق.