منطقة إعلانية

يُمكننا وضع إعلانك هنا🧡ويُمكنك التواصل معنا عن طريق صفحةالفيس بوك

هذه النصائح هي نصائح بناء علي تجربتي الشخصية واكيد كل شخص له تجربة مختلفة وبالتالي اذا كان لديك نصائح بناءاً علي تجربتك في ال css فيرجي كتابتها في تعليقات اليوتيوب الخاصة بهذا الدرس وسيتم اضافتهاهنا اسفل هذا الدرس😍

نصائح 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استخدام padding بدلاً من margin لعمل مسافة بين الروابط

سيتم شرح هذه النصيحة في الفيديو الخاص بهذا الدرس لانها تحتاج الي شرح عملي اكثر من النظري😃

4border-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;}

6use 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;
}

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

نصائح css
grouping in VS code

7border: 4px solid red;

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

8Chrome dev tool

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

9CSS RGB color

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

10use padding NOT margin with  <a>

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

نصائح من التعليقات الخاصة بالفيديو😍

اذا كان لديك نصائح بناءاً علي تجربتك في ال css فيرجي كتابتها في تعليقات اليوتيوب الخاصة بهذا الدرس وسيتم اضافتها هنا🧡

Do not waste your time and start with us, now 😍