أفضل ممارسات CSS: تسع علامات على CSS سيئة

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

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

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

تعقيد CSS

هل CSS صعب؟ لا! بالتأكيد لا ، لديها بعض القواعد الهيكلية الأساسية للغاية. لديك محددات (فئة ، معرف ، عنصر) ، لديك خصائص ولديك نطاق. إنها طريقة أقل من لغة مثل C أو Java أو PHP. يمكن للمطور الحصول على الفكرة بأكملها في بضع دقائق من القراءة وبدء التصميم. بالطبع ، لمعرفة الفرق بين الهامش والحشو ، يمكنك إلقاء نظرة على w3schools ، ولكن متى تستخدم هذا الأمر يتطلب بعض الخبرة. لكنها ليست علم الصواريخ.

الآن ، ما يجعل الأمور أكثر تعقيدًا هو كل الطرق التي يتسابق بها المحددون والتي من أجلها يتغلبون على التالي ، وكيف تؤثر خاصية ما على أخرى (display: block vs display: inline) ثم لدينا تفاصيل أصغر مثل انهيار الهامش وتكديس الفهرس z وخصائص أداء وحدة معالجة الرسومات مقابل وحدة المعالجة المركزية ونموذج الصندوق وخصائص الطباعة.

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

إذا نظرنا إلى الفقرتين أعلاه ، فسنرى المرحلتين الرئيسيتين لمطوري الواجهة الأمامية عند العمل مع CSS - أحدهما هو " أوه ، هل هذا كل شيء؟ والثاني هو " أوه **** ، لم يكن هذا كل شيء ". هذا ما يعنيه "تعقيد CSS"

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

WordPress CSS: دليل أساسي للمبتدئين

كيف تكتب CSS: محاربة تعقيدها

هناك عدد قليل من الحلول التي توصل إليها الأشخاص الأذكياء ، والنظرة العامة ستكون:

• اصطلاحات تسمية CSS مثل BEM و SMACSS وغيرها ، والتي تحدد قواعد أسماء الفئات التي من شأنها تقليل احتمالية حدوث تضارب.
• CSS in JS هي طريقة أحدث تتيح لك عمليًا كتابة مكونات CSS في ملفات JS (تبدو سيئة ، تبدو سيئة ، لكنها منطقية على الأقل). صالح في الغالب مع React و Vue وغيرهما.
• وحدات CSS هي طريقة أكثر عقلانية لاستخدام CSS في JS لشخص ينتهي بكافة الأنماط في ملف واحد. تقوم وحدات CSS بتغليف أنماط كل مكون بحيث لا يمكن أن تتسرب إلى المكونات الأخرى ، مما يجعل طريقة إعادة الاستخدام أسهل. كما أنه يقلل من التوتر كثيرًا!

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

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

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

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

ترقب الأدوات الجديدة! إنها تمنعنا من محاربة المشكلات التي وجدها مجتمع المطورين بالفعل وأصلحها ووفر طريقة للتعامل معها.

الآن بعد أن حددنا معنى تعقيد CSS وبعض النصائح الأولية حول مكافحته ، دعنا نتعمق في نظرة عامة أكثر تفصيلاً ونقدم أمثلة مباشرة.

نصائح تصميم مواقع الويب: كيفية تصعيد لعبتك في تصميم الويب

تسع علامات لـ CSS سيء

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

تعمل الهوامش بشكل غريب

المشكلة الشائعة التي يواجهها المطورون هي عندما لا يضيف عنصران هوامشهما (أعلى / أسفل). على سبيل المثال ، لدينا عنصران <p> بهامش: 20px 0 ؛. إجمالي المسافة بينهما 20 بكسل ، وليس 40. هذا بسبب انهيار الهامش. إلا إذا كانت العناصر تطفو أو تم وضعها بشكل مطلق. هذا "الاستثناء" موجود في كل مكان تقريبًا لكل تعريف تقريبًا.

مؤشر Z: 9999999 وما زال غير موجود في أعلى مؤشر z: 1

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

عدم تحريك الخصائص الصحيحة

إنه سؤال بسيط إلى حد ما ، لكن بعض المطورين يعانون عندما يتعلق الأمر بالرسوم المتحركة والطريقة التي يجب اتباعها. أولاً ، ما الذي يمكن تحريكه؟ أي شيء يمكن أن يكون له قيمة ابتدائية وقيمة نهائية وأي شيء بينهما. العتامة هي خاصية من هذا القبيل ، يمكنك البدء من 0 ، والانتهاء من 1 ، وإضافة خطوات لا نهائية بين 0.3 و 0.6758 و 0.9875 وما إلى ذلك. لا يمكنك تحريك "العرض" لأنه لا توجد خطوات وسطية بين المضمنة والشبكة.

الرسوم المتحركة غير الفعالة

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

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

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

محددات عميقة للغاية

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

في بعض الأحيان ، نريد الكتابة فوق مكون ، تابع لمكون آخر في صفحة معينة. لذلك انتهى بنا الأمر بشيء مثل هذا: .page-name .section-name .component-1 .component-2 {…} أربعة مستويات عميقة بالفعل. ولكن ما اتضح أنه يمكننا ببساطة تنفيذ .page-name .componen-2 {…}. الأقصر هو الأفضل! لأنه إذا حدث أنه لسبب ما ، يجب عليك استبدال هذا النمط الجديد ، فلن تضطر إلى الانتقال إلى 5 مستويات عميقة ، ثم 6 ، ثم أكثر.

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

ملف كبير جدًا

الآن ، بالطبع ، بالنسبة للتطبيق الكبير ، سيكون هناك الكثير من الأنماط ، وهذا أمر مفهوم تمامًا. لكن هل هو دائما بهذا الحجم؟ الطريقة السيئة لتوسيع الفئات في SASS (من خلال mixins) ستنشئ سلاسل تحديد كبيرة ، والتي تستغرق بضع ثوانٍ للتمرير لرؤيتها جميعًا. من شأن الامتداد المناسب أن يقلل هذا الملف كثيرًا. يمكن حتى مضاعفة الحجم.

تعد الأطر المضمنة ، والتي لا يستخدم منها سوى عدد قليل من الخصائص ، سببًا شائعًا للملفات الكبيرة. اجمع معًا bootstrap / Foundation و font-awesome و animate.css وبعض الأطر / المكتبات المماثلة الأخرى وينتهي بك الأمر بملف ضخم تستخدم منه حوالي 2٪. نظفها وحافظ عليها مرتبة واستخدم فقط ما هو مطلوب بالفعل. في كثير من الأحيان لا توجد حاجة حتى إلى إطار عمل.

الإطار عند عدم الحاجة إليه

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

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

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

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

عدم السماح للمحتوى بتحديد الحجم

هذه مشكلة على مستوى المبتدئين ، لكنها شائعة جدًا. يجب أن تمنح المحتوى الحرية التي يستحقها.

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

بعد ذلك ، يجب ألا يحتوي حقل الإدخال على ارتفاع 40 بكسل ، بل يجب أن يحتوي على حشوة 1em. الآن ، حجم الخط ، المحتوى هو ما يحدد الحجم. وإذا نما المحتوى بالداخل ، فلن ينكسر العنصر.

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

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

اختراق جافا سكريبت

يمكن لجافا سكريبت أن تصنع العجائب! لكنها ليست ضرورية دائمًا. يمكنك فعل الكثير باستخدام CSS المدعوم جيدًا ، ولا يتطلب وظائف (من الأفضل اختبارها تلقائيًا بعد ذلك) ولا يتطلب من أعضاء FE الآخرين معرفة JS أيضًا.

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

النصيحة هنا هي البحث عن حلول CSS أولاً. لنفترض أنك تريد إنشاء نافذة منبثقة. يظهر في الوسط (الموضع: ثابت). ثم تريد إغلاقها من أيقونة [X] أو عند النقر حولها. في JS ، ستحتاج إلى كتابة الأحداث التي من شأنها تشغيل أي شيء باستثناء المحتوى المنبثق. ولكن لا يزال يتم التشغيل على [X] الموجود في المحتوى المنبثق.

بدلاً من ذلك ، من CSS يمكنك فقط كتابة <div> آخر بحجم 100vw و 100vh و z-index أسفل النافذة المنبثقة. ثم يمكنك ببساطة استهداف div في JS ، وهو سطر واحد.

مثال آخر - تريد زرًا يمكنك وضعه في المحتوى ، والذي سيقوم "بتوسيع" أي محتوى يتبعه. بسيط مع CSS ، أكثر تعقيدًا مع JS. باستخدام CSS ، يمكنك القيام بشيء مثل هذا:

 Label.button - أنماط الزر بصريًا.

 الإدخال: غير (: محدد) ~ * {display: none} - إخفاء كل شيء بعده في نفس الحاوية.

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

الطريق لتصبح مصمم ويب جيد

استنتاج

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