قد يكون العمل باستخدام أوراق الأنماط المتتالية (CSS) صعبًا على المبتدئين. باستخدام CSS ، يمكنك هيكلة مظهر التطبيق الخاص بك وتحديثه والحفاظ عليه. لكن اللغة تتطلب مهارات للتعامل مع صفحات HTML للحصول على التصميم المطلوب.
فيما يلي بعض الأخطاء التي يجب تجنبها عند العمل باستخدام CSS. سيوفر لك الوقت ويسهل عملية التطوير الخاصة بك.
1. استخدام px لأحجام الخط
تمثل وحدة "px" وحدات البكسل. يمكنك استخدامه للتعبير عن أطوال مختلفة على صفحة الويب ، من عرض عنصر وارتفاعه إلى حجم خطه.
ومع ذلك ، يقوم px بتأمين التصميم الخاص بك إلى حجم ثابت لجميع الشاشات. يمكن للصورة في px أن تشغل العرض الكامل لشاشة واحدة ، ونسبة صغيرة فقط من شاشة أخرى. إذا كنت تريد عنصرًا أكثر تناسبًا ، استخدم القياسات النسبية مثل rem ، أو النسب المئوية (٪).
أفضل قياس نسبي للاستخدام هو rem. تشير هذه الوحدة إلى حجم خط عنصر الجذر الذي يمكن للقارئ غالبًا تعيينه في إعدادات المتصفح. يمكنك رؤية تأثير px و rem على عنصر في المثال التالي:
لغة البرمجة>
<لغة البرمجة>
<رأس>رأس>
<جسم>
<h1>هذا هو العنوان 1h1>
<h2>هذا هو العنوان 2h2>
<ص>هذه فقرة.ص>
<ص>هذه فقرة أخرى.ص>
جسم>
لغة البرمجة>يمكنك نمط أحجام الخطوط في هذا المستند باستخدام وحدات px مع CSS التالية:
h1 {
حجم الخط: 50مقصف;
}h2 {
حجم الخط: 30مقصف;
}
ص {
حجم الخط: 15مقصف;
}
تبدو الصفحة الناتجة مقبولة عند عرضها على شاشة كبيرة:
لكنها لا تبدو جيدة المظهر على شاشة أصغر ، كما هو الحال في الهاتف:
بعد ذلك ، قم بتطبيق rem على نفس المحتوى. حدد حجم الخط الأساسي على عنصر html ، وحجم العناصر الأخرى باستخدام rems ، كما هو موضح أدناه:
لغة البرمجة {
حجم الخط: 16مقصف;
}h1 {
حجم الخط: 3rem;
}h2 {
حجم الخط: 2rem;
}
ص {
حجم الخط: 1rem;
}
لاحظ الفرق بين الشاشات الكبيرة والصغيرة. باستخدام rem ، يتم قياس المحتوى بشكل أفضل بغض النظر عن حجم الشاشة. لن تتجاوز العناصر أبدًا حجم الشاشة المحدد. هذا هو السبب في أنه من الأفضل استخدام أطوال نسبية بدلاً من وحدات البكسل.
على شاشة سطح المكتب:
على شاشة صغيرة ، لا يزال النص في الوحدات rem قابلاً للقراءة:
2. وضع كل ما تبذلونه من الأنماط في ملف واحد
يمكن أن يؤدي استخدام ملف CSS واحد لمشروع كبير إلى حدوث فوضى. سيكون لديك ملف يحتوي على أسطر طويلة من التعليمات البرمجية التي ستكون مربكة عند التحديث. حاول استخدام ملفات مختلفة لأوراق أنماط CSS لمكونات مختلفة.
على سبيل المثال ، يمكن أن يكون لديك ملفات مختلفة للتنقل والرأس والتذييل. وأخرى لأقسام على الجسم. يساعد فصل ملفات CSS في هيكلة تطبيقك وتشجيع استخدام الكود.
3. استخدام Inline CSS بشكل غير لائق
في Vanilla CSS ، يمكنك كتابة أنماط على صفحات HTML تمامًا كما في أطر عمل CSS مثل Bootstrap و TailwindCSS. يتيح لك Inline CSS تطبيق نمط فريد على عنصر HTML. يستخدم سمة النمط لعنصر HTML.
الكود التالي هو مثال على CSS المضمنة.
<h2أسلوب="الون الاخضر؛">هذا عنوان أخضرh2>
<صأسلوب="لون احمر؛">هذه فقرة حمراء.ص>
سيظهر النص على النحو التالي:
ومع ذلك ، يمكن أن تكون لغة HTML التي تحتوي على CSS مضمنة فوضوية فقط. نظرًا لعدم وجود موقع آخر لـ CSS ، فإن جميع CSS موجودة في نفس ملف HTML. سوف تبدو مزدحمة. يعد تحرير مثل هذا الملف أمرًا صعبًا ، خاصةً إذا لم يكن رمزك.
أيضًا ، باستخدام CSS المضمنة ، يجب عليك كتابة رمز لكل عنصر. هذا يزيد من التكرار ويقلل من إعادة استخدام الكود. استخدم دائمًا مجموعة من أوراق الأنماط الخارجية و CSS المضمنة لتصميم صفحات الويب الخاصة بك.
4. الإفراط في الاستخدام!
في CSS ، يعد ملف !مهم تضيف القاعدة أهمية أكبر إلى الخاصية / القيمة. إنه يتجاوز قواعد الأنماط الأخرى لتلك الخاصية على هذا العنصر.
يجب أن يكون لديك القليل فقط !مهم القواعد في التعليمات البرمجية الخاصة بك. استخدمه فقط عند الضرورة. لا جدوى من كتابة التعليمات البرمجية ثم تجاوزها. ستبدو شفرتك فوضوية وتسبب مشاكل عند تشغيلها على بعض الأجهزة.
لغة البرمجة>
<لغة البرمجة>
<رأس>رأس>
<جسم>
<ص> أنا برتقالي ص>
<صفصل="صفي"> انا اخضر ص>
<صبطاقة تعريف="معرف"> انا حزين. ص>
جسم>
لغة البرمجة>CSS:
# معرف هويتي {
لون الخلفية: أزرق;
}.صفي {
لون الخلفية: أخضر;
}
ص {
لون الخلفية: البرتقالي !مهم;
}
النتيجة هكذا:
5. عدم اتباع اصطلاحات التسمية
يحتوي CSS على اصطلاحات تسمية توجه المطورين حول كيفية كتابة التعليمات البرمجية القياسية. هذا ضروري إذا انتهى بك الأمر تصحيح ملف CSS في تاريخ مستقبلي.
يتضمن أحد هذه المعايير استخدام الواصلات لفصل الكلمات المجمعة. آخر هو تسمية المحدد وفقًا لما يفعله. لذلك لن يضطر أي شخص ينظر إليه إلى التخمين. كما أنه يسهل قراءة التعليمات البرمجية وصيانتها ومشاركتها. على سبيل المثال:
بدلا من هذا:
.image1 { الهامش الأيسر: 3%; }اكتبها على هذا النحو:
.boy-image { الهامش الأيسر: 3%; }عند النظر إلى ورقة الأنماط ، ستعرف بالضبط الصورة التي يستخدمها الرمز. دليل أنماط HTML / CSS من Google يسرد العديد من الاصطلاحات التي يجب على كل مطور معرفتها.
كتابة التعليقات هي أكثر المهارات التي يتم التقليل من شأنها في البرمجة. ينسى الكثير من الناس كتابة تعليقات لشرح التعليمات البرمجية الخاصة بهم. لكنه يوفر الوقت. التعليقات ضرورية لقراءة التعليمات البرمجية والحفاظ عليها.
نظرًا لأن CSS منظم بشكل فضفاض ويمكن لأي شخص تطوير اتفاقياته الخاصة ، فإن التعليقات ضرورية. يعد استخدام التعليقات المنظمة جيدًا لشرح ورقة الأنماط ممارسة جيدة. يمكنك كتابة تعليقات تشرح أقسام الكود وما يفعلونه.
/ * تحتاج عناصر الفيديو إلى مساحة للتنفس * /
.فيديو {
الهامش العلوي: 2م;
}
/ * تصميم قسم البطل * /
.تحية {
الهامش العلوي: 1م;
}
7. الفشل في التصميم مسبقًا
كثير من الناس يفعلون ذلك ، لكن من الخطأ الفادح أن تبدأ البرمجة بدون خطة. تحدد CSS الشكل الذي تبدو عليه بنية الواجهة الأمامية. يقول التصميم الكثير عن مهارات البرمجة الخاصة بك.
يوضح التصميم الخاص بموقعك رؤيتك والموارد اللازمة للوصول إلى هناك. احصل على صورة ذهنية لمشروعك. ثم صممه على الورق أو استخدمه مجموعة أدوات تصميم مثل Canva لتصور ما تريد.
عندما يكون لديك صورة كاملة عن المشروع ، قم بتجميع كل مواردك وابدأ في الترميز. سيوفر لك الوقت والتكرار.
لماذا يجب أن تنظر في هذه التوصيات
إذا كنت تقوم بتطوير تطبيقات على الويب ، فستستخدم CSS. يتطلب العمل بشكل جيد مع CSS ممارسة واتباع الاتفاقيات القياسية. الاصطلاحات لا تجعل شفرتك قابلة للقراءة فحسب ، بل تجعلها قابلة للصيانة أيضًا.
ستوفر لك كتابة التعليمات البرمجية الموحدة الوقت والجهد. الوقت الذي كنت ستقضيه في تنسيق الواجهة الأمامية الذي يمكنك قضاؤه على ميزات أكثر تعقيدًا. يضمن أيضًا أنه يمكنك إعادة استخدام التعليمات البرمجية ومشاركتها مع الآخرين. اكتب كودًا أفضل باتباع اصطلاحات المجموعة وكن مطورًا أفضل.
