كيفية Refactor المغلق - دليل

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

إعادة بيع المنازل يساعد منع انفجار CSS ، ويحسن قراءة رمز وإعادة الاستخدام, و يجعل CSS أكثر أناقة وأسرع في التنفيذ.

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

أفضل طريقة للحفاظ على قاعدة كود CSS لدينا هي الالتزام بـ “refactor في وقت مبكر ، refactor في كثير من الأحيان” بحكم التجربة. في هذا المنشور ، سوف نلقي نظرة على بعض النصائح حول كيفية إجراء عملية إعادة هيكلة CSS فعالة.

1. إجراء التدقيق الأولي

للحصول على صورة أفضل حول ما نحتاج إلى إعادة بناءه ، من الأفضل أن نفعل ذلك ابدأ بمراجعة شاملة لمعرفة ما لدينا حاليًا.

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

تقوم CSS غير المستخدمة بالتحقق من قواعد CSS غير المستخدمة ، في حين أن أدوات الفحص ، مثل CSS Lint ، تجعل من الممكن العثور بسرعة على التوافقية وقابلية الصيانة وقضايا أخرى.

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

2. إعداد خطة للإدارة

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

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

إنها فكرة جيدة لذلك تتبع هذه التعديلات الإضافية التي سنحتاج إلى تنفيذها, و بنائها في جدول إعادة هيكلة لدينا جنبا إلى جنب مع المهام الأساسية ذات الصلة CSS.

3. تتبع التقدم

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

4. التمسك دليل نمط الترميز

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

الأشياء المهمة التي يجب البت فيها هي:

• اصطلاحات التسمية
• قواعد التنسيق
• ترتيب إعلان
• الوحدات والقيم التي نريد استخدامها
• قواعد التعليق

إذا كنا لا نريد إنشاء دليل أسلوب الترميز الخاص بنا ، فيمكننا أيضًا استخدام شخص آخر ، مثل ThinkUp والذي يمكن العثور عليه في Github.

لا يكفي مجرد تقديم دليل أسلوب الترميز ، نحن بحاجة أيضًا إلى ذلك التمسك بها عندما نعيد كتابة الكود أثناء إعادة البناء ، و نتوقع نفس الشيء من الجميع الذي يعمل في مشروعنا.

5. إعداد هيكل ملف متماسك

بعد أن نكون مستعدين للتحضيرات ، فإن أول ما نحتاج إلى القيام به هو إعداد بنية ملف CSS مناسبة تهتم بالطبيعة المتتالية لـ CSS.

يعتمد هذا بشكل أساسي على أفضل طريقة لتنظيم ملفاتنا ، ولكن هناك بعض القواعد العامة ، مثل استخدام منفصل normalize.css ملف لأنماط إعادة تعيين CSS ، منفصلة global.css للأنماط العامة المستخدمة عبر المشروع بالكامل ، ولتخزين مكتبات الجهات الخارجية في مجلد منفصل.

إذا كنا نرغب في اللعب بأمان مع بنية ملف CSS لدينا ، فهناك أيضًا بنى جاهزة ، مثل SMACSS أو ITCSS ، توفر تقنيات فعالة حول كيفية تنظيم ملفات CSS بطريقة قابلة للتطوير.

6. تخلص من القواعد غير المستخدمة والمكررة

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

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

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

جنبا إلى جنب مع قواعد عفا عليها الزمن ، والقواعد المكررة يؤدي أيضا إلى سخام رمز وفقدان الأداء. يمكننا إزالتها باستخدام الوحدة النمطية CSS Purge Node.js ، ولكن يمكننا أيضًا العمل معها CSS linters من أجل البحث عن قواعد مكررة في ملفات CSS لدينا.

7. تقليل الخصوصية

يتم حساب خصوصية محدد CSS من خلال عدد وأنواع المحددات الداخلية التي يحتوي عليها. يتم التعبير عن خصوصية CSS كرقم مكون من 4 أرقام وهو الأسهل لفهمه إذا تحقق من آلة حاسبة خصوصية CSS المرئية هذه:

أقل خصوصية (0001) ينتمي إلى محددات لا تستهدف سوى عنصر HTML عام واحد ، مثل

أو

. لمزيد من محددات الداخلية التي يحتوي عليها محدد مركب ، وكلما ارتفعت خصوصية.

محددات معينة ، مثل هوية شخصية أو محددات قادمة من الأنماط المضمّنة ، لها أولويات أعلى لأنها تتجاوز الأنماط التي تنتمي إلى محددات أكثر عمومية. على سبيل المثال خصوصية # ID1 محدد هو 0100.

في إعادة البناء ، الهدف هو تقليل خصوصية المحددات (إبقائها قصيرة) قدر الإمكان ، قدر الإمكان محددات ذات خصوصية أعلى تقلل بشكل كبير من إعادة استخدام المحدد, و يؤدي إلى قاعدة رمز المتضخمة.

الأنواع الرئيسية الثلاثة من محددات الخصوصية العالية هي:

1. محددات مؤهلة, مثل p.class1 (تحديد ص العلامة غير ضرورية هنا ، حيث إنها تجعل من المستحيل استخدام نفس الفئة مع عناصر HTML الأخرى)
2. محددات متداخلة بعمق, مثل .class1 .class2 .class3 .class4 ...
3. معرفات, مثل # ID1

يمكن استخدام الأدوات عبر الإنترنت ، مثل CSSDig المذكورة في الخطوة 1 ، للعثور بسرعة على محددات الخصوصية العالية هذه. قد يكون من المفيد أيضًا إعداد قاعدة في دليل أنماط الترميز حول أشياء مثل الحد الأقصى لمستوى التداخل ، أو الحد من استخدام هوية شخصية محددات.

8. تخلص من !مهم قواعد

قواعد CSS متبوعة بـ !مهم بيان تجاوز قواعد النمط العادية. عن طريق !مهم قواعد عاجلا أم آجلا يؤدي إلى رمز غير متماسك. انها ليست صدفة معظم أدوات الفحص بمناسبة لهم خطأ.

عندما نحتاج إلى كتابة CSS بسرعة ، فقد نبدأ في الاعتماد عليها بسبب بساطتها.

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

9. تنظيف خارج الأرقام السحرية والقيم ترميز الثابت

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

 .class1 position: absolute؛ أعلى: 28 بكسل ؛ اليسار: 15.5 ٪ ؛ 

المشكلة الرئيسية مع الأرقام السحرية هي أنها ظرفي, وهم يجسدون “البرمجة عن طريق التقليب” النموذج المضاد. أثناء عملية إعادة التجهيز ، نحتاج إلى إزالة هذه القواعد التعسفية من نظامنا ، واستبدالها بحلول أكثر منطقية حيثما كان ذلك ممكنًا.

نفس حكم الإبهام ينطبق على القيم الثابت ترميز كذلك. ربما يمكن العثور على التكرار الأكثر تكرارًا للقيم المرمزة في قواعد ارتفاع الخط:

 / * سيئ ، سنحتاج إلى إضافة قواعد ارتفاع خط ثابت إضافية إلى العناصر التابعة لـ .class1 * / .class1 font-size: 20px؛ ارتفاع الخط: 24px ؛  / * جيد ، يمكن استخدام قاعدة الطول المرنة بأمان بواسطة العناصر الفرعية وكذلك * / .class1 font-size: 20px؛ ارتفاع الخط: 1.2 ؛ 

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

10. وحدات Refactor والقيم

لجعل الصيانة وتصحيح الأخطاء أسهل في المستقبل ، وتجنب الأعطال التي قد تنجم عن استخدام وحدات مختلفة ، مثل م و بكسل, في وقت واحد ، نحن بحاجة إلى التمسك بقواعد متماسكة حول كيفية استخدامنا للقيم النسبية والمطلقة.

إذا استخدمناها بشكل غير متسق في الماضي ، فنحن بحاجة إلى تحويلها حتى يمكن أن تشكل نظامًا موجزًا

إذا استخدمنا الكثير من الألوان المتشابهة على موقعنا ، فقد يكون من الحكمة أيضًا ترشيد نظام الألوان عن طريق تقليل عدد الألوان التي نستخدمها. (إليك منشور عن كيفية اختيار نظام ألوان موقع الويب بطريقة عملية.)