الـ #CSS لغة سهلة.. مع كذا إتقانها صعب😒
في هذا الثريد راح أشارككم تصائح ذهبية تخلي رحلتكم في برمجة الـ CSS أسهل بكثير!
في هذا الثريد راح أشارككم تصائح ذهبية تخلي رحلتكم في برمجة الـ CSS أسهل بكثير!
1⃣ - شيل الـ padding والـ margin من كل شيء
المتصفح يضيف padding و margin بشكل تلقائي على حاجات كثيرة , هالشيء يمكن يسبب لك مشاكل ويتعبك وقت عملية الـ debugging , لكذا الأفضل تشيلهم وتحطهم بنفسك كل ماتحتاجهم .. بس آخر سطر إيش يعني؟ ايش فايدة خاصية الـ border-box ؟
المتصفح يضيف padding و margin بشكل تلقائي على حاجات كثيرة , هالشيء يمكن يسبب لك مشاكل ويتعبك وقت عملية الـ debugging , لكذا الأفضل تشيلهم وتحطهم بنفسك كل ماتحتاجهم .. بس آخر سطر إيش يعني؟ ايش فايدة خاصية الـ border-box ؟
بإختصار شديد, هالخاصية لما تحط قيمتها لـ border-box , تخلي الـ padding والـ border داخل بطول وعرض العنصر النهائي.. هالشيء راح يسهل مهمة البرمجة عليك ويخلي الكود clean أكثر.
2⃣ - استخدم متغيرات الـ CSS
هالموضوع تكلمت عنه كثير وبثريد كامل ومفصل هنا:
كملخص بسيط, استخدام المتغيرات يسهل عليك حياتك كثير ويخلي كودك مرتب أكثر ( تغيير قيمة المتغير بمكان واحد تخلي التاثير يصير بأكثر من مكان )
هالموضوع تكلمت عنه كثير وبثريد كامل ومفصل هنا:
كملخص بسيط, استخدام المتغيرات يسهل عليك حياتك كثير ويخلي كودك مرتب أكثر ( تغيير قيمة المتغير بمكان واحد تخلي التاثير يصير بأكثر من مكان )
3⃣ - استخدم فكرة الـ utility classes
الـ utility class هو كلاس CSS يسوي وظيفة وحدة فقط ( مثلا يخلي حجم الخط أكبر ) , ليش هالشيء مفيد؟ لأنه راح يخلي كود الـ CSS مرتب أكثر و maintainable .. مثال:
الـ utility class هو كلاس CSS يسوي وظيفة وحدة فقط ( مثلا يخلي حجم الخط أكبر ) , ليش هالشيء مفيد؟ لأنه راح يخلي كود الـ CSS مرتب أكثر و maintainable .. مثال:
4⃣ - استخدم الـ rem لحجم الخط
أشوفه خيار ممتاز إنك تعرف حجم الخط by default في الـ html tag في ملف الـ CSS , مثلا 16px فيصير الحين 1rem تساوي 16px , بشكل عام ما أنصح بإستخدام الـ em ( لها مشاكل كثيرة ) ولا أنصح بالـ px لحجم الخط ( مجرد رأي )
أشوفه خيار ممتاز إنك تعرف حجم الخط by default في الـ html tag في ملف الـ CSS , مثلا 16px فيصير الحين 1rem تساوي 16px , بشكل عام ما أنصح بإستخدام الـ em ( لها مشاكل كثيرة ) ولا أنصح بالـ px لحجم الخط ( مجرد رأي )
5⃣ - أقضي وقت كبير على دراسة وفهم خاصية الـ display
لازم تعرف الفرق كويس بين inline-block ,inline, block , فهمك لهذي القيم جدا مهم
ملاحظة: هالنصيحة تتضمن إنك تتعلم الـ flexbox والـ grid طبعا.
لازم تعرف الفرق كويس بين inline-block ,inline, block , فهمك لهذي القيم جدا مهم
ملاحظة: هالنصيحة تتضمن إنك تتعلم الـ flexbox والـ grid طبعا.
6⃣ - لا تبني أي layout بإستخدام الـ float ولا تتعلم حتى كيف تبني layout عن طريقه!
للأسف لا زلت أشوف بعض الدروس تشرح كيف تبني layout بإستخدام خاصية الـ float والي أشوفه شيء سيء جدا وماله فايدة خصوصا إن الـ CSS تدعم تقنيات حديثة الحين زي الـ flexbox والـ grid
للأسف لا زلت أشوف بعض الدروس تشرح كيف تبني layout بإستخدام خاصية الـ float والي أشوفه شيء سيء جدا وماله فايدة خصوصا إن الـ CSS تدعم تقنيات حديثة الحين زي الـ flexbox والـ grid
* النهاية *
لو عجبك الثريد وتبغى تشوف محتوى مشابه تابع حسابي
@Webnprog
ورتويت عشان يوصل لأكبر قدر ممكن من الناس❤️
لو عجبك الثريد وتبغى تشوف محتوى مشابه تابع حسابي
@Webnprog
ورتويت عشان يوصل لأكبر قدر ممكن من الناس❤️
Loading suggestions...