7 نصائح مهمة لكتابة أفضل CSS

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

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

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

لذا لنبدأ ... ‌ ‌

1. جاف

يرمز DRY إلى "لا تكرر نفسك" . هذا هو مبدأ عام لتطوير البرمجيات ويمكن تطبيقه في أي لغة برمجة ، وكذلك في CSS. كما يمكننا أن نفهم من اسمها ، تهدف DRY إلى تجنب التكرار أو تقليله قدر الإمكان.

على سبيل المثال ، يمكننا إنشاء 3 فئات CSS لثلاثة أزرار مثل هذا:

.primary-button { background: blue; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .form-button { background: green; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .cancel-button { background: red; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; }

أو يمكننا استخدام مبدأ DRY عن طريق كتابة القواعد المشتركة مرة واحدة في فئة إضافية والقواعد المختلفة لكل منها في الفئات الأخرى:

.button { color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .primary-button { background: blue; } .form-button { background: green; } .cancel-button { background: red; }

كما نرى ، فإن تطبيق مبدأ DRY يتجنب التكرار ويقلل من عدد الأسطر ويحسن قابلية القراءة وحتى الأداء.

2. التسمية

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

// BAD NAMING .p { // Rules } .myFirstForm { // Rules }

بشكل طبيعي،

هي علامة HTML وتقف على الفقرة. أعلاه ، لا يمكننا أن نفهم حقًا ما هو الفصل p . أيضًا ، يجب تجنب أسماء مثل myFirstForm ، ولا أنصح باستخدام حالة الجمل .

بدلاً من ذلك ، استخدم الأسماء التعريفية (مفصولة بشرطة لأسماء متعددة):

// GOOD NAMING .article-paragraph { // Rules } .contact-form { // Rules }

أعتقد أن الأسماء أكثر منطقية الآن :)

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

3. لا تستخدم الأنماط المضمنة

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

في رأيي ، أفضل الممارسات في الواقع هي عدم استخدام الأنماط المضمنة. سأركز هنا على لماذا لا ينبغي لنا ذلك.

فصل المخاوف

وفقًا لمبدأ فصل الاهتمامات ، يجب فصل التصميم (CSS) والمحتوى (HTML) والمنطق (JavaScript) لأسباب مثل سهولة القراءة والصيانة.

يؤدي تضمين قواعد CSS داخل علامات HTML إلى انتهاك هذه القاعدة:

 Some Text 
يجب علينا بدلاً من ذلك الاحتفاظ بقواعد التصميم الخاصة بنا في ملفات CSS الخارجية.

صعوبات في البحث

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

على سبيل المثال ، دعنا نغير حجم خط النص على صفحة الويب الخاصة بنا. للقيام بذلك ، نجد أولاً ذلك الجزء المحدد في المتصفح حيث يلزم التغيير من خلال النظر في بنية HTML:

 Some Text 

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

.text-bold { font-size: 16px; // change the font-size to 14px font-weight: bold; }

ولكن إذا كانت القواعد مكتوبة بأسلوب مضمّن بدلاً من استخدام الفئات:

 Some Text 

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

ألن يكون الأمر أسهل مع محدد CSS؟ ولكن هناك شيء أسوأ ...

قضايا الخصوصية / الكتابة فوق

تتمتع الأنماط المضمنة بأعلى درجة من الخصوصية بين محددات CSS (عندما لا نحسب ! العلامات المهمة ).

بالنظر إلى أننا نستخدم فئة ونمط مضمّن لعنصر:

.text-bold { font-size: 16px; font-weight: bold; }
 Some Text 

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

.text-bold { font-size: 20px; font-weight: bold; }

سيظل حجم الخط 14 بكسل. لذلك لن ينجح التغيير الذي أجريته في فئة CSS ، مما سيجعلك تقول:

"مرحبًا ، لماذا لا يعمل كود CSS الخاص بي؟ أنا أكره CSS!"

وتقودك إلى استخدام ! علامة مهمة تحقق السحر:

.text-bold { font-size: 20px !important; font-weight: bold; }

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

4. Avoid the !important tag

OK, so your CSS wasn't working as was supposed to, and you made it work by applying the important tag:

!important

What happens next? The !important tag has the highest specificity of all CSS selectors.

You're basically saying to the browser to apply that specific rule with the !important tag always and under any circumstances. This is not good because CSS rules can differ from one selector to another, from parent selector to child.

The only way to override an important tag is to use another important tag. And this leads to using more and more important tags. Trust me, in the near future your project code will be full of !important tags, which makes your CSS code much harder to maintain. So try not to use it.

5. Use a Preprocessor

Working with a CSS Preprocessor like Sass or LESS is very useful in bigger projects. A preprocessor brings additional features to our CSS code that we normally can't do.

For example, we can define variables, functions and mixins, we can import & export our CSS files in other CSS files and we can write nested CSS code:

A preprocessor has its own syntax and later it gets translated into standard CSS (in a separate CSS file) because browsers don't understand the syntax.

I like working with Sass and have used it in various projects. I have covered some of the advantages of using a CSS Preprocessor here.

6. Use Shorthands

Some of the CSS properties like paddings, margins, fonts and borders can be written in a much simpler way by shorthands. Using shorthands helps to reduce the lines of rules.

So without shorthands, a CSS class would look like this:

.article-container { padding-top: 10px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; margin-top: 10px; margin-bottom: 10px; margin-left: 15px; margin-right: 15px; border-width: 1px; border-style: solid: border-color: black; }

and with shorthands it looks like this:

.article-container { padding: 10px 15px 20px 15px; margin: 10px 15px; border: 1px solid black; }

You can find here more info about how to use shorthands properties and for which CSS properties they can be applied.

7. Add Comments When Necessary

Normally, quality code doesn't need comments because it should already be clear and self-descriptive. But still, in some cases, we may need to write additional explanations.

// Your Comments .example-class { // your rules }

So when you feel that some parts of the code are unclear, then don't be afraid to add comments (but on the other hand, make sure not to overdo it :)).

As a Frontend Developer with a couple of years of experience, these are the most important tips that I can suggest for improving your CSS skills. If you have any questions, or you think there are also other tips for writing better CSS, don't hesitate to comment down below.

إذا كنت تريد معرفة المزيد عن تطوير الويب ، فلا تتردد في متابعتي على Youtube !

شكرا لقرائتك!