سعيد بوتر وترتيب CSS

أولاً ، هذه ليست معركة مشتركة. لا يتعلق الأمر CSS مقابل CSS-in-JS ، وليس atomic CSS مقابل BEM ، وليس LESS SASS . هذه المعركة تدور حول النظام.

هذه المعركة بين ORDER و CHAOS. وبين ORDER و ، ... ترتيب آخر . باختصار - حول طريقة أفضل لفرز خصائص CSS. لا أكثر ولا أقل.

باختصار - هناك 3 طرق للقيام بذلك:

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

من الآن دعنا ننسى الطريقة الأولى. انها ليست الطريقة.

2012

كان هناك استطلاع جيد من الحيل المغلق ، وهنا النتائج:

إنه 2019 بالفعل ، ما الذي تغير؟

الفرق بين alpha sort و ABCSS كما هو معروف ، grouping سليم تمامًا ، لكن من الأفضل توضيح ذلك

الحالة الأولية

لنبدأ مع CHAOS المثالي من هذه القضية أجمل

 .wrapper { top: 20px; /* is it absolute? fixed? You begin searching downwards */ margin-left: 20px; /* Any other margins applied? */ display: flex; /* How is this flexed? searching for justify / align / flex rules */ position: absolute; /* ah absolute */ height: 100%; /* and width? */ margin-bottom: 20px; border-radius: 5px; /* Is there even a border? */ color: red; justify-content: center; margin-left: 2px; left: 0px; width: 100%; /* and height? */ border: 1px solid red; } 

جميلة؟ هكذا تبدو CSS الشائعة بعد بضع سنوات دون أي سيطرة.

ABCSS

فرزها أبجديا

 .wrapper { border: 1px solid red; border-radius: 5px; color: red; display: flex; height: 100%; justify-content: center; left: 0px; margin-bottom: 20px; margin-left: 20px; margin-left: 2px; /* ouch? */ position: absolute; top: 20px; width: 100%; } 

لقد ساعدنا فقط في ملاحظة أن لدينا اثنين margin-lefts . سيكون من الأسهل إضافة خاصية جديدة في المرة القادمة ، خاصة إذا تم كل الفرز تلقائيًا على مستوى stylelint .

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

العيب الرئيسي - height يذهب قبل width ، left يذهب قبل top وهناك بعض المسافة بينهما. الفرز الأبجدي هو خلط السياق .

لقد استخدمت بعض الأدوات عبر الإنترنت لجعلها. إن الكم الهائل من الأدوات المتاحة عبر الإنترنت ، والمكونات الإضافية لـ IDEs وأدوات CLI تدعم فرز ألفا من خارج الصندوق. - سهل الاستخدام.

المجموعات

فرزها في مجموعات

 .wrapper{ position: absolute; top: 20px; left: 0; display: flex; justify-content: center; width: 100%; height: 100%; margin-bottom: 20px; margin-left: 20px; margin-left: 2px; color: red; border: 1px solid red; border-radius: 5px; } 

هذه المرة يتعلق الأمر أكثر separation of concerns - يتم تجميع جميع الخصائص (مجمعة) في دلاء بمعنى ما. يُعرف مبدأ الطلب باسم "Outside-in"

• خصائص التخطيط (الموضع ، الطفو ، الشفاف ، العرض)
• خصائص طراز الصندوق (العرض ، الارتفاع ، الهامش ، الحشو)
• الخصائص المرئية (اللون ، الخلفية ، الحدود ، صندوق الظل)
• خصائص الطباعة (حجم الخط ، عائلة الخط ، محاذاة النص ، تحويل النص)
• خصائص متنوعة (المؤشر ، تجاوز السعة ، مؤشر z)

والمشكلة - هناك أكثر من معيار حوله. أن تكون أكثر واقعية - أكثر من خمسة. وهذه مشكلة. أم لا؟

ومرة أخرى - يتم الفرز بواسطة أداة ، CSSCOMB هذه المرة.

الميزة الرئيسية - يتم تجميع جميع الخصائص عن طريق المنطق السليم. جميع خصائص المرن - معا. كل موقف ، يسار ، يمين ، أعلى ، أسفل - معًا.

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

هذا يتطلب بعض التوضيح:

• مع ترتيب alpha - أنت تبحث عن بداية السطر ، مع الإشارة إلى بداية ونهاية الحرف الأول "your". ثم أنت ذاهب يعتقد هذا subblock وهذا يتم. هذا هو الأساس يا (ن). بعد بعض التدريب - O (n / 2) ، طالما أنك تعرف "أين" تبحث عن سند.
• مع فرز المجموعة - أنت تعرف "أين" للبحث عن مجموعات دعم - للمجموعات موقع ثابت ، ثم تمر بمجموعة فرعية صغيرة ، ويتم ذلك. هذا في الأساس - يا (3) ، وليس "ن".

العيب الرئيسي - عليك أن تتعلم كيف تفصل بين المشاهدين. قال 99٪ من المشاركين في الاستبيان أن هذه مشكلة كبيرة - كتابة CSS مجمعة ، لكنها مهمة ، وليس لك. و ، نعم ، يوجد أكثر من معيار واحد ، لكنه ليس مشكلة في ذلك الحين يتم الطلب بواسطة أداة.

الاستطلاع

لذلك ، قمت ببعض الأبحاث حول هذه المشكلة.

• في عام 2012 ، أبلغت css-tricks عن استخدام٪ 45 من مجموعات devs ، 14-نوع alpha ، 39 لا تستخدم أي شيء
• تم إنشاء استطلاع الرأي اليوم (ولم ينته بعد) - 50٪ للمجموعات ، 25٪ لـ alpha ، 25٪ لا تستخدم أي شيء

أفضل الأسباب لاستخدام المجموعات:

• المجموعات هي الطريقة الأكثر طبيعية لتجميع الأشياء: هذه هي الطريقة التي تكتب بها بها. تخيل لو كان عليك كتابة كلمات في جملة بالترتيب الأبجدي. أعلى ، يمين ، أسفل ، ينتمون بشكل طبيعي معًا ، مباشرةً بعد الموضع: مطلق ( تويتر ).
• يمكن أن يكون السبب الذري للمجموعات هو CSS الذري - عادةً ما تكون الذرة / الأداة المساعدة مرتبطة بـ "مجموعة" واحدة ، إنها طريقة طبيعية للأطر الوظيفية. لذلك قد يبدو CSS "الطبيعي" كذرات متحدة - أي مجمعة ( twitter ).
• قد تفضل الفرق الأصغر تجميع الخواص ذات الصلة (مثل تحديد المواقع ونموذج الصندوق) معًا الاصطلاحية-المغلق .
• هناك إيجابيات وسلبيات لكلا الطريقتين. من ناحية ، يكون الترتيب الأبجدي عالميًا (على الأقل بالنسبة للغات التي تستخدم الأبجدية اللاتينية) ، لذلك لا توجد حجة حول فرز خاصية واحدة قبل أخرى. ومع ذلك ، يبدو غريبا للغاية بالنسبة لي أن أرى خصائص مثل أسفل وأعلى ليس بجوار بعضهما البعض. لماذا يجب أن تظهر الرسوم المتحركة قبل نوع العرض؟ هناك الكثير من الشذوذ مع الترتيب الأبجدي. من ناحية أخرى ، فإن ترتيب الخصائص حسب النوع أمر منطقي تمامًا. يتم جمع كل الإعلانات ذات الصلة بالخط ، يتم جمع شمل من أعلى وأسفل وقراءة مجموعة قواعد يشعر وكأنه قراءة قصة قصيرة. دليل ساس .
• مجموعة ملفات فرز أصغر بنسبة 2 ٪ بعد gzip. السحر. تقدم هذه المقالة 5 طرق مختلفة لطلب الدعائم المغلق. دراسة

بعض الأسباب لعدم استخدامها

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

أسباب الاستخدام الأبجدي:

• اعتدت أن أفعل بواسطة "مجموعة" لكنها ذاتية للغاية. بالإضافة إلى أن هناك الكثير من الإضافات لفرز مجموعة من الخطوط. أيضًا أدوات حساب أدوات Dev Dev هي ألفا.
• أبجديا. أي شيء آخر يعني أن أي شخص يأتي إلى المشروع يحتاج أيضًا إلى تعلم نمط حياتك.
• تستخدم شركتي الخاصة نوع ألفا (كانت مفاجأة لي).
• دليل جوجل المغلق يوصي ABCSS ، دون تفسير.

لذلك ، TLDR

• معظمنا (وأنا عادة ما يتم تضمينها) لا يعطون معلومات عن طلب الدعائم من CSS. معظمنا أيضا لا يعطي القرف عن CSS نفسه.
• CSS-in-JS أيضًا لا يشجع أفضل الممارسات.
• أفضل الممارسات مثل CSS atomic هي الأفضل مع المجموعات (حسب التصميم) ، بينما BEM ، لسوء الحظ ، ليس لديه أي شيء عن طلب العقار :(

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

حقيقة ممتعة - يمكن أن تكون المجموعات والترتيب الأبجدي أفضل الأشياء ، على سبيل المثال لربط واردات الوحدة الخاصة بك ، مثل eslint-plugin-import
هناك مجموعات أولاً ، ويتم استخدام الترتيب الأبجدي فقط داخل مجموعة واحدة.

• الوبر الأنيق للمجموعات: https://github.com/constverum/stylelint-config-rational-order (أو csscomb)
• نمط الوبر لفرز ألفا: https://github.com/hudochenkov/stylelint-order

حتى الآن سمعت الحجج المعقولة تمامًا grouping المؤيد ، ولكن ليس الفرز الأول (المعقول بالنسبة لي) للمحترفين ألفا.

انظر أيضا:

• (حول جميع الخيارات) https://mediatemple.net/blog/tips/different-logical-ways-group-css-properties/
• (حول المجموعات) https://webdesign.tutsplus.com/articles/outside-in-ordering-css-properties-by-imanceance--cms-21685
• (حول حروف الهجاء) https://medium.com/@jerrylowm/alphabetize-your-css-properties-for-crying-out-loud-780eb1852153

اختر جانبك ، واشرح موقفك. لدي بعض الفشار للمشاركة.