كيفية كتابة CSS الرهيبة حقا

يتحدث الجميع عن "النصائح" و "النصائح المؤيدة" لكتابة CSS رائعة.

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

اسمحوا لي أن آخذك في رحلة حول كيفية كتابة CSS سيئة حقًا.

جاهز؟

ملاحظة: حتى إذا أقسمت CSS-in-JS ولا تحب Vanilla CSS ، فنحن جميعًا نتفق على شيء: لا يزال يتعين علينا جميعًا معرفة بعض CSS ...

لذلك ، سواء أكنت تكتب CSS أو بعض المجموعات الفائقة مثل SASS أو CSS-in-JS فقط ، فستظل تستفيد من معرفة شكل CSS السيئ تمامًا.

من يكتب التعليقات؟ لا أحد.

بدون تعليقات؟ كود فعلي كتبت منذ وقت ما ولكن جردت جميع التعليقات

من السهل أن تنزلق هنا حتى لا تلاحظ بسرعة كبيرة.

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

كيف ذكية ، هاه؟

ضع كبرياءك جانبا ، واحفظ نفسك وزملائك في الفريق من التوتر.

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

أرض منتقي المجمع

بلى! لقد تعلمت للتو CSS وتشعر أنك على قمة العالم. لذلك ، حان الوقت لاظهار بعض العضلات محدد.

حركة سيئة.

بإجراء اختيارات باستخدام عدد كبير جدًا من محددات CSS ، ربما تكون قد نجحت في جعل CSS غير قابل للإصلاح إلى حد كبير. يعتمد الآن بشكل كبير على بنية HTML لتطبيقك.

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

فقط أضف فصلًا إلى العنصر واستمر في الحياة!

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

بسيطة جيدة ، دائما تقريبا!

أداء؟ خندق ذلك!

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

لكن انتظر…

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

هي احتمالات ، تقرأ من خلال محدداتك من اليسار إلى اليمين.

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

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

النظر في المثال الرسم أعلاه ، فإن المتصفح سوف يطابق جميع العناصر (*) ، وكذلك التحقق مما إذا كانوا أحفاد الجسم.

الجسم * {
  ...
}

لكن لماذا؟ يُعد كل عنصر مرئي تقريبًا من الناحية المثالية سليل العنصر . هذا مجرد فحص غير فعال لا داعي له.

أنا تمتص في تسمية الأشياء ، لذلك أنا لا أزعج.

لا يوجد سوى 2 أشياء صعبة في علوم الكمبيوتر. تسمية الأشياء و ...

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

أشك في وجود أي موقف يكون من المنطقي فيه استخدام الأحرف المفردة كأسماء فئة.

.u {
  حجم الخط: 60rem؛
}

وماذا عن أسماء الفصول الفائقة؟

.former-black-now-red-paragraph {
  لون احمر؛
}

هؤلاء لا يفعلون أي خير أيضًا.

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

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

استخدم أسماء ذات معنى ، ولكن لا تطغى عليها.

سمعت فصول كانت كبيرة. الإفراط في استخدامها!

هممم .... عندما يكون ذلك ممكنا ، تجنب أكثر من الطبقات modularised

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

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

عندما تختار تجميع هذه الفئات ، فربما تكون ذاتية. إذا كنت تبني مكتبة ذرية من نوع ما ، فقد تميل إلى ذلك.

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

عندما يكون ذلك ممكنا ، تجنب أكثر من الطبقات modularised.

أنا خالص CSS. لا أفعل ساس أو أقل

أنت صفاء من CSS ، أنا صفاء من CSS ، كلانا خالصان. دعنا نتخلص من ذلك.

الآن ، إلى حد الخلاف.

هناك بالتأكيد حالات استخدام حيث مجرد كتابة الفانيليا CSS رائع! على سبيل المثال ، إذا لم أستخدم حل CSS-in-JS لمشاريع React الخاصة بي ، فقد أقرر السير في مسار CSS الخالص. لم يصب بأذى.

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

مرة أخرى ، أنا لا أقول استخدام المعالجات في كل مرة. أنا أقول لا أغلق هذا الخيار. يمكن أن يوفر لك!

لديك الكثير من الأسلوب المهم هناك!

أنا أكره CSS. انها فقط لا تعمل أبدا. إذن ، ما هو الحل؟

لديك الكثير من الأهمية في كل مكان عندما أحتاج إلى تجاوز أي إعلانات. هاها!

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

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

CSS ليس بهذا السوء. تتقبله.

هل تريد أن تكتب Better CSS؟

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

أسرار CSS السبعة التي لم تكن تعرفها