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

اليوم ، دعنا نستكشف خمسة ممارسات CSS يجب عليك تجنبها . أتمنى أن تجد هذه الأفكار مفيدة! دعنا نذهب ؟

1. محددات محددة بشكل مفرط

كتابة محددات محددة للغاية يمكن أن تجعل CSS أكثر صعوبة لإدارة وتصحيح. حافظ على المحددات بسيطة وقابلة لإعادة الاستخدام.

يتجنب:

#header .nav .link.active:hover {
    color: red;
}

أحسن:

.nav-link:hover {
    color: red;
}

استخدم الخصوصية فقط عند الحاجة لتجنب التعقيد غير الضروري.

2. المحددات العالمية الزائدة

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

يتجنب:

* {
    margin: 0;
    padding: 0;
}

أحسن:

html, body {
    margin: 0;
    padding: 0;
}

تقليل استخدام المحددات العالمية لمنع الآثار الجانبية غير المتوقعة.

3. ألوان أو القيم المتشددين

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

يتجنب:

.primary-btn {
    color: #3498db;
    margin: 20px;
}

أحسن:

:root {
    --primary-color: #3498db;
    --default-margin: 20px;
}
.primary-btn {
    color: var(--primary-color);
    margin: var(--default-margin);
}

4. وحدات غير متناسقة

خلط وحدات (على سبيل المثال ، PX ، REM ، ٪) يؤدي إلى تصميمات غير متسقة وقضايا الاستجابة.

يتجنب:

font-size: 16px;  
margin: 1rem;  
width: 50%;

أحسن:

font-size: 1rem;  
margin: 1rem;  
width: 50%;

استخدم وحدات ثابتة مثل REM للخطوط و ٪ للتخطيط.

5. نسيان توافق المتصفح

باستخدام ميزات CSS جديدة دون النظر في دعم المتصفح يمكن أن يكسر التصميمات لبعض المستخدمين.

يتجنب:

div {
    aspect-ratio: 16 / 9;
}

أحسن:

@supports (aspect-ratio: 1) {
    div {
        aspect-ratio: 16 / 9;
    }
}

خاتمة

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

أتمنى أن تجد هذا المنشور مفيدًا! نراكم في المقالة التالية!