كيفية تحسين CSS مع أدلة نمط الكود

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

هناك نوع آخر من دليل الأنماط يمكننا استخدامه في تطوير الويب ، وهو مهم بنفس القدر ولكن نادرًا ما يتم مناقشته: أدلة نمط للكود نفسه. أدلة نمط الكود هي للمطورين بدلاً من المصممين ، وهدفهم الرئيسي هو تحسين CSS ، أو الكود الآخر.

وضع أدلة نمط رمز المناسبة في الاستخدام يوفر لنا قاعدة رمز منظمة أكثر تنظيماً ، قابلية قراءة أفضل للشفرة ، ورمز أكثر قابلية للصيانة. ليس من قبيل الصدفة أن تستفيد منها شركات التكنولوجيا الكبرى ، مثل Google أو AirBnB أو Dropbox.

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

أدلة نمط الكود مقابل مكتبات الأنماط

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

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

كل من أدلة نمط التعليمات البرمجية ومكتبات النماذج تتضمن إستراتيجية تصميم ، لكن نوع مختلف. توفر مكتبات النماذج ، مثل Bootstrap ، أو Zurb Foundation ، أو BBC's Global Experience Language ، أو مكتبة أنماط MailChimp ، واجهة مستخدم مع فئات CSS سابقة للطباعة ، والطباعة ، ونظام الألوان ، وأحيانًا نظام شبكة وأنماط تصميم أخرى.

تحتوي أدلة أدلة نمط CSS ، مثل Evernote أو ThinkUp (أو تلك المذكورة في المقدمة) قواعد حول كيفية كتابة CSS بما في ذلك أشياء مثل اصطلاحات التسمية ، بنية الملف ، ترتيب الممتلكات ، تنسيق التعليمات البرمجية, و اخرين.

لاحظ أن مولدات دليل نمط المعيشة ، مثل KSS أو Styledown أو Pattern Lab, توليد مكتبات النمط و ليس أدلة أسلوب الترميز. بينما تعد مكتبات النماذج مفيدة للغاية وترفع مستوى عملية تطوير الويب ، إلا أنها لا تسمح لنا بتحسين الشفرة نفسها.

اصنع دليل نمط كود CSS الخاص بك

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

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

على سبيل المثال ، يُظهر AirBnB أمثلة جيدة وسيئة للمطورين بالطريقة التالية سهلة الهضم:

هيكل الملف

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

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

التعشيش

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

 .class_1 .class_2 # id_1 # id_2 li a span color: #bad؛ 

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

تسمية القواعد

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

الأنماط الأربعة الشائعة المستخدمة في تسمية المحدد هي .أحرف صغيرة, .under_scores, .اندفاعة-ES, و .lowerCamelCase. لا بأس في اختيار أيٍّ منهما لكننا نحتاج إلى اتباع نفس المنطق عبر المشروع بأكمله.

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

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

قواعد التنسيق

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

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

ترتيب الإعلان

الأشياء التي يتم ترتيبها تكون دائمًا أسهل في الرؤية و طلب إعلانات CSS (الخصائص مع قيمها) وفقا لقاعدة من المنطقي النتائج في رمز منظم أفضل.

ألقِ نظرة على سبيل المثال ، قواعد طلب خاصية WordPress ، وهي تحدد الأساس البسيط ولكن المنطقي التالي لترتيب الخصائص التي تم تجميعها حسب معانيها:

1. عرض
2. وضع
3. نموذج مربع
4. الألوان والطباعة
5. آخر

الوحدات والقيم

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

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

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

.class // good margin: 0؛ // bad margin: 0px؛ // bad margin: 0em؛ // margin bad: 0rem؛ 

وتعليقا

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

Idiomatic CSS على سبيل المثال ، ينشئ نظام تعليق مفيدًا حتى يستخدم بعض فن ASCII الأساسي ، وينتج عنه رمز منظم بشكل جميل: