نصائح CSS 😍

1CSS prefers-color-scheme

حاول دائما ان تستخدم هذه الميزة الجديدة في ال CSS لأنها تُمكننا من التحكم في كيفية إظهار الموقع في حالة إذا كان الزائر في وضع ال dark mode او ال light mode
وتم شرح هذه الخاصية في هذا الدرس

2CSS minify CSS files

عند كتابة الأكواد حاول دائما تصغير الاكواد (minify) حتى تصل الي اعلي أداء للموقع (minifying CSS files can improve performance)
مثال علي ذلك؛ هذه الأكواد

 
h1 {
    color: #000000;
}
h2 {
    color: #000000;
}

يُمكن تقليلها كالتالي:

 
h1, h2 { background-color: #000000; }

ويفضل حذف المسافات الفرغة (whitespace) وبالتالي تكون الأكواد هكذا:

 
h1,h2{background-color:#000000;}

وإذا كانت قيمة اللون مكونة من 6 أحرف متشابهين مثل #000000 فيمكن اختصاره الي #000 وسيتم شرح قاعدة اختصار اللون في الفيديو الخاص بهذا الدرس
وبالتالي يكون الكود كالتالي:

 
h1,h2{background-color:#000;}

بعد الانتهاء من كتابة الاكواد حاول دائما ان تقوم بتصغير الاكواد (minify code) حتى تحصل على أفضل أداء للموقع ويوجد مواقع مثل minifycode.com التي تقوم باختصار الأكواد
او إضافات (extensions) خاصة ببرنامج VS code تقوم بذلك مثل minify

⚠ هذه المواقع تقوم بإزالة المسافات الفارغة وبالتالي تكون جميع الاكواد علي سطر واحد وأيضا تقوم بإزالة ال comments الموجودة في الاكواد

3 Think twice, code once.

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

4 border-radius: ***;
Box-shadow: ***;
Transition: ***;
Animation: ***;
:hover: ***;

هذه الاكواد او الخصائص التي دائما استخدمهم كثيرا في المواقع الخاصة بي لأنها تُعطي شكل جمالي رائع للموقع 🧡

5CSS تنظيم أكواد الـــ

حاول دائما تنظيم الاكواد حتى يُمكن قراءتها والتعديل عليها بسهولة
مثال علي ذلك:

 
/* =============
 table of contents
===============
 
1. global styles
2. HTML elements
3. components
    3.1 buttons
    3.2 navbar
4. other 
 
*/
 
 
 
 
/* ===============
   1. global style
================ */
 
html {box-sizing: border-box;}
 
*,
*:before,
*:after {
box-sizing: inherit;}
  
* {margin: 0;}
  
body {background-color: #fff;}
  
/* ================
    2. HTML elements
================= */
  
p{
margin-bottom: 1rem;
line-height: 2rem;}

6 use grouping in VS code

مثال علي ذلك:
هذه الاكواد

 
/* ================
   2. HTML elements
  ================= */
 
p{
  margin-bottom: 1rem;
  padding: 20px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 10px;
}
 
h1{
  line-height: 2rem;
  color: #333;
  background-color: #fff;
  border-radius: 12px;
  font-size: 1.5em;
}

يُمكن كتابتها كالتالي:

7 border: 4px solid red;

انا عندما اقابل مشكلة في تنسيق العنصر، دائما استخدم هذا الكود لمعرفة حدود العنصر
مثال علي ذلك:
عندما اريد وضع العنصر في المنصف واستخدم text-align: center; والعنصر لا يتحرك من مكانه ف أقوم باستخدام border: 4px solid red; لمعرفة حدود هذا العنصر وإصلاح المشكلة. 😃

8 Chrome dev tool

ايجاده استخدام chrome dev tool حتى يُمكن وإيجاد المشاكل وإصلاحها بسهولة 😃

9CSS RGB color

من المعرف انه يوجد العديد من الطُرق لكتابة اللون ولكن انا اُفضل طريقة ال RGB حتى يُمكننا التحكم بدرجة شفافية اللون بنفس الكود
مثال علي ذلك:
مثال على اللون الرمادي color: rgb(128, 128, 128); وبالتالي يُمكن إضافة قيمة رابعة للتحكم في درجة الشفافية وتكون قيمتها من 0 ال 1 كالتالي color: rgb(128, 128, 128, 0.5 );

10 use padding NOT margin with   <a>

عند التعامل مع اللينكات يُفضل استخدام ال padding بدلاً من الــ margin حتي نضمن ان تكون هناك مساحة كبيرة للضغط علي اللينك في حالة عرض الموقع علي الموبايل.
وسيتم شرح هذه النقطة بالتفصيل في الفيديو الخاص بهذا الدرس