Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

فهم المغلق إحصائيات: كيفية الاستفادة القصوى الأرقام

by
Difficulty:IntermediateLength:LongLanguages:

Arabic (العربية/عربي) translation by Muhammad Hasrullah (you can also view the original English article)

في حال كنت لم تلاحظ، cssstats.com موقع تحليل المغلق تلقي إصلاح مؤخرا. وهو أداة مصممة بشكل جميل يمنحك الكثير من التبصر الموضوعي في التعليمات البرمجية الخاصة بك، ولكن كيف يمكنك جعل أفضل استخدام للإحصاءات CSS؟ ما ينبغي أن إطلاق النار؟ ماذا تعني، وكيف يمكن استخدامها اليومي؟

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

دليل البدء السريع لإحصائيات المغلق

على رأس أكثر إلى cssstats.com، أدخل أي عنوان url لموقع الويب الخاص بك، أوراق الأنماط، أو لصق المغلق الخام مباشرة في textarea في الجزء السفلي وضرب الذهاب.

وبمجرد تحليل، سيتم منحك طن من إحصاءات حول المغلق؛ من عدد القواعد المستخدمة، حجمها متوسط، تعطل كل نوع من الإعلان وألوان الخط والخلفية وعائلات الخط والأحجام وخصوصية الرسوم البيانية.

وهذا ما "إحصائيات المغلق" يمنحك، الآن دعونا ننظر إلى ما يمكن أن نفعله مع جميع البيانات.

التركيز على الصيانة

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

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

مراكز الصيانة المغلق على العديد من جوانب مختلفة.

  • كيف بسهولة يمكنك تصميم وحدة نمطية معينة؟
  • كيف بسهولة يمكنك تصميم نسخة معدلة من تلك الوحدة النمطية؟
  • يمكن لمطور جديد شامل فهم نظم المغلق الخاص بك توظف؟
  • هو المغلق الخاص بك يمكن التنبؤ بها ومتسقة ومنظمة؟
  • هل أنت تعتمد على المعالج (أو أداة أخرى) لجعل التنمية وتجزئة أكثر مرونة؟
  • قم بتكرار نفسك كثيرا؟
  • هل تستخدم اتفاقيات التسمية والأنماط المحددة سابقا؟

ونحن لن يكون الغوص في كل عنصر من هذه العناصر على حدة، ولكن عندما نتحدث عن الصيانة، كل هذه الاعتبارات تؤثر الصيانة الشاملة لتعليمات البرمجة الأساسية الخاصة بك.

لذا، ما هذه الإحصائيات أقول لكم عن الصيانة؟

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

والطريقة الأولى لتحليل إحصائيات المغلق الخاص بك للبحث عن علامات سخام المغلق.

سخام

ونعني بسخام CSS غير المستخدمة أو زائدة عن الحاجة، أو خلاف ذلك لا لزوم لها.

يتم تحميل ما هي مقياس للموقع المغلق؟

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

إذا كنت ترى عددا هائلا من محددات (على سبيل المثال، إذا كان موقع الويب الخاص بك من صفحة واحدة بسيطة تتضمن قدر المغلق كإطار ويب مثل Bootstrap، الذي سيبدأ العمل في محددات 2400 فقط تحت)، فمن المحتمل أن كنت قد ذهبت خطأ في مكان ما. إذا كنت تقوم بتحميل في 30 من أحجام الخطوط والتصميم الخاص بك تدعو إلى 10، فمن المحتمل أن يكون لديك الأنماط غير المستخدمة، والمتضخمة، أو أنماط متناسقة ربما.

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

ما هي أنواع الصفحات التي يتم تحميل الموقع؟

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

medium font size
Medium.com يستخدم حجم خط من 301px في مكان ما...

ومع ذلك، إذا كنت تقوم بإنشاء شيء من هذا القبيل، على سبيل المثال، بلوق مع نظام ألوان محدودة، "إحصائيات المغلق" الخاص بك ينبغي أن تعكس أن إعلان لون التحديد وخط الاعتماد.

التكرار بين القواعد

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

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

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

إذا أردت نسخة زرقاء لهذا الزر نفسه. كيف ينبغي أن تذهب حول تحديد ذلك؟ إذا كان يمكنك إعادة تعريف الفئة btn نفسه، أنها ستبحث شيئا مثل هذا:

وبطبيعة الحال، هناك العديد من المشاكل مع هذا. أولاً، أنه ينتهك الجافة (لا تكرر نفسك) المبدأ. ولكن لماذا يهم ذلك؟ الصيانة. لنفترض، على سبيل المثال، أن التصميم التغييرات ويدعو إلى خط أصغر على أزرار. ثم عليك الانتقال إلى فئة .btn و class .btn-blue لتغيير حجم الخط. يحدث حتى أكثر تعقيداً عندما تحتاج إلى المتغيرات أزرار الرمادي الأزرق والعادية، مثل إصدار المخطط الأزرق. كافة التغييرات الخاصة بك إلى أي زر واحد يتعين القيام بها على العديد من الأزرار.

وهذا غير فعالة بشكل لا يصدق. بدلاً من ذلك، ينبغي أن تكون استفادتك من حقيقة أن الطبقات هي وحدات، وتسمح لك بتعريف أنماط زر توسيع الفئة.btn الأساسي الخاص بك.

اها! والآن لدينا حل تستعصي أكثر بكثير، وأيضا يقوم بإزالة عدد كبير من خطوط المغلق ويتبع مبدأ الجافة.

خصوصية

خصوصية هي واحدة من الزوايا المظلمة أكثر صعوبة لفهم المغلق أن رحلات غالباً ما يصل حتى للمطورين الأكثر خبرة. على "إحصائيات المغلق"، يمكنك أن ترى تخطيط خصوصية يوضح كيفية محددة المحددات في المغلق الخاص بك، فضلا عن حيث تظهر تلك المحددات.

BBC specificity
خصوصية المغلق من موقع بي بي سي

يوضح هذا الرسم البياني خصوصية محددات كما كنت واجهوها في CSS من bbc.co.uk. تخيل أن يمين الرسم البياني هو أعلى ورقة الأنماط ، ثم يتحرك على طول المحور x أثناء قراءته لأسفل ورقة الأنماط. كلما كانت القاعدة أكثر تحديدًا ، ارتفع الخط الأزرق الداكن على محور y.

قواعد خصوصية الإبهام

سنقوم بتقديم ثلاثة عامة "قواعد الإبهام" تبدأ مع، وثم شرح القواعد.

  1. انتقل من أقل تحديداً إلى أكثر تحديداً
  2. تبادل لإطلاق النار لأدنى خصوصية متوسط ممكن
  3. الحد من القمم في المخطط الخاص بك

سنتحدث عن كل من هذه أكثر في العمق، ولكن أولاً دعونا الحديث قليلاً عن كيفية عمل خصوصية.

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

عندما محرك المغلق لقاءات <a>العلامة مع فئة من button، فإنه يجب تحديد إذا ينبغي أن تكون سمة color #fff#،000، أو المستعرض الافتراضي. خصوصية المغلق هو ruleset يستخدم المستعرض لاتخاذ هذا القرار.

النقاط

إذن ، كيف تعمل الخصوصية؟ استخدم نظام التسجيل هذا كدليل ، مأخوذ مباشرة من CSS Tricks:

  • محددات العنصر والعناصر الزائفة تلقي 1 نقطة.
  • محددات الطبقة والطبقات الزائفة تلقي 1، 0 نقطة.
  • معرف محددات الحصول على 1,0,0 نقطة.
  • أنماط مضمنة الحصول على 1,0,0,0 نقطة.
  • ! مهم ينسخ كل منهم
  • * محددات الحصول على درجة خصوصية لجميع 0s.

لاحظ أن في هذا سجل النظام، عندما سارت الأمور بما يزيد على 10، فإنه لا يذهب إلى العمود التالي، على سبيل المثال إذا كان لديك محدد أن 11 من عناصر طويلة، فإنه لن تمتد لتكون خصوصية 0,0,1,1. وبدلاً من ذلك سيكون 0,0,0,11.

وإليك بعض محددات ونتائجهم الناتجة عن ذلك.

حسنا--الآن أن لدينا تمهيدي أساسية بعيداً عن خصوصية المغلق، كيف ينبغي أن التأثير على التعليمات البرمجية الخاصة بنا؟ دعونا نذهب إلى لدينا ثلاث قواعد من الإبهام لخصوصية المغلق.

#1 انتقل من أقل تحديداً إلى أكثر تحديداً

تنص هذه القاعدة أساسا أن محددات عامة في بداية المغلق الخاص بك، ومحددات أكثر تحديداً يجب أن تأتي في وقت لاحق في المغلق الخاص بك. ولهذه القاعدة أسباب كثيرة.

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

apple css specificity
أنماط على موقع أبل محددة بشكل كبير في وقت مبكر في ورقة الأنماط
pure css specificity
خصوصية الإطار "المغلق نقية" يزيد عموما نهاية ورقة الأنماط

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

ستضمن هذه الممارسة أن التطور اللاحق في نفس المشروع يمكن أن يفهم بسرعة نظام التتالي.

تبادل لإطلاق النار #2 لأدنى خصوصية متوسط ممكن

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

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

حفظ محددات الخاص بك أقل محددة بطريقة أكثر تعقلا، أكثر تستعصي على التعامل مع المغلق الخاص بك.

بعض النصائح برو:

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

#3 الحد من القمم في المخطط الخاص بك

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

الاستنتاج

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

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

مزيد من القراءة

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.