يمكن للجميع كتابة تعليمات برمجية CSS، حتى لو كانت تعمل في مشروعك الآن. ولكن هل يمكن أن يكون CSS أفضل؟ على الرغم من أن webjx.com يقدم مجموعة متنوعة من التقنيات في هذا المجال، ابدأ في استخدام هذه الجوانب الخمسة لتحسين CSS الخاص بك، مما سيجعلك تبدو أكثر احترافية ويجعل الكود الخاص بك أفضل!
1. إعادة الضبط
بداية، دعني أخبرك بكل جدية أنه يتعين عليك دائمًا إعادة تعيين فئات معينة. سواء كنت تستخدم Eric Meyer Reset، أو YUI Reset، أو تكتب رمز إعادة التعيين الخاص بك، فما عليك سوى استخدامه.
يمكنه بسهولة إزالة الحشو والهامش من جميع العناصر:
html، body، div، h1، h2، h3، h4، h5، h6، ul، ol، dl، li، dt، dd، p، blockquote،
ما قبل، النموذج، مجموعة الحقول، الجدول، ال، td { الهامش: 0؛
يعد كل من Eric Meyer Reset وYUI Reset قويين للغاية، لكن بالنسبة لي، فإنهما يذهبان إلى أبعد من ذلك. أعتقد أنك ستحتاج في النهاية إلى إعادة ضبط كل شيء ثم إعادة تعريف خصائص جميع العناصر. ولهذا السبب يوصي إريك ماير باستخدام أكثر كفاءة (إعادة تعيين ورقة الأنماط) ولا تستخدم فقط ورقة أنماط إعادة التعيين الخاصة به، بل قم بسحبها وإفلاتها في مشروعك. اضبطها (ورقة أنماط إعادة التعيين) وأنشئ ورقة أنماط إعادة التعيين الخاصة بك.
أوه، من فضلك توقف عن استخدام:
* {الهامش: 0؛
اقض المزيد من الوقت في صنعها، ما الذي تعتقد أنه سيحدث لأزرار الاختيار عند إزالة الحشو؟ يمكن أن تقوم عناصر النموذج في بعض الأحيان بأشياء غير تقليدية، لذا فإن الطريقة الأكثر فعالية هي جعلها مستقلة.
2. الفرز
اختبار صغير: هذا المثال سيجعلك تفكر في كيفية العثور على سمة الهامش الصحيحة بشكل أسرع؟
مثال رقم 1
شعبة # رأس h1 {
مؤشر z: 101؛
اللون: #000؛
الموقف: نسبي؛
ارتفاع الخط: 24 بكسل؛
الهامش الأيمن: 48 بكسل؛
الحد السفلي: 1 بكسل صلب #dedede؛
حجم الخط: 18 بكسل؛
}
مثال رقم 2
div#header h1 { border-bottom: 1px Solid #dedede;
لا يمكنك أن تخبرني أن المثال رقم 2 لا يمكنه العثور على خاصية الهامش الصحيحة بشكل أسرع. فرز خصائص العنصر الخاص بك أبجديا. سيساعدك إنشاء CSS باستمرار على توفير الوقت في البحث عن خاصية معينة.
أعلم أن بعض الأشخاص ينظمون التعليمات البرمجية الخاصة بهم بطريقة معينة والبعض الآخر ينظمونها بطريقة أخرى، ولكن في شركتي اتخذنا قرارًا بالإجماع يقضي بتنظيم جميع التعليمات البرمجية أبجديًا. من المؤكد أنه يساعد على العمل مع الآخرين من خلال تنظيم التعليمات البرمجية الخاصة بك بهذه الطريقة. أشعر بالحرج في كل مرة أجد فيها ورقة أنماط متتالية لم يتم فرز خصائصها أبجديًا.
3. التنظيم
يجب عليك تنظيم أوراق الأنماط الخاصة بك بحيث يكون المحتوى ذو الصلة قريبًا من بعضها البعض، مما يسهل العثور على ما تبحث عنه. استخدم تعليقات توضيحية أكثر كفاءة. على سبيل المثال، هذه هي الطريقة التي أقوم بها ببناء ورقة الأنماط المتتالية الخاصة بي:
/*****إعادة تعيين******/ إزالة الحشو وهامش العنصر.
/*****العناصر الأساسية*****/ تحديد نمط العناصر الأساسية: الجسم، h1-h6، ul، ol، a، p، إلخ.
/*****فئات عامة*****/ تعريف الأنماط البسيطة، مثل تعويم جانب واحد، وإزالة الهامش السفلي لعنصر ما، وما إلى ذلك. بالطبع، لا يرتبط معظمها بالدلالات التي نريدها، لكنها من الضروري معالجة التعليمات البرمجية بكفاءة.
/*****التخطيط الأساسي*****/تحديد القوالب الأساسية: الرأس والتذييل وما إلى ذلك. ساعد في تحديد العناصر الأساسية لتخطيط صفحة الويب
/*****الرأس*****/ تحديد كافة عناصر المستمع
/*****المحتوى*****/ تحديد كافة العناصر في مربع المحتوى
/*****التذييل******/تحديد كافة عناصر التذييل
/*****إلخ*****/ تحديد محددات أخرى. ومن خلال إضافة تعليقات توضيحية إلى العناصر المتشابهة وتصنيفها في مجموعات، ستجد ما تريده بشكل أسرع.
4. الاتساق
بغض النظر عن الطريقة التي تقرر بها كتابة التعليمات البرمجية، كن متسقًا. لقد سئمت من مناقشة CSS ذات السطر الواحد مقابل الخطوط المتعددة. ليست هناك حاجة للقول. كل شخص لديه رأيه، لذا اختر طريقة العمل التي تفضلها وكن متسقًا في جميع أوراق الأنماط الخاصة بك.
أنا شخصياً سأستخدم مزيجًا من الاثنين معًا. إذا كان للمحدد أكثر من 3 سمات، فسوف أقوم باقتطاعه وكتابته في أسطر متعددة.
div#header { float: width: 100% }
شعبة # رأس شعبة. عمود {
الحدود اليمنى: 1 بكسل صلب #ccc؛
تعويم: يمين يمين؛
الهامش الأيمن: 50 بكسل؛
الحشو: 10 بكسل؛
العرض: 300 بكسل؛
}
div#header h1 { float: left;
لذا ابحث عن الطريقة التي تفضلها للعمل ثم حافظ على ثباتك.
5. ابدأ من المكان الصحيح
لا تحاول الاقتراب من ورقة الأنماط الخاصة بك حتى تكتمل لغة الترميز.
عندما أستعد لتقسيم صفحة ويب، قبل إنشاء ملف CSS، أحتاج إلى معاينة جميع المستندات ووضع علامة عليها بين علامة فتح النص وعلامة إغلاق النص. لن أقوم بإضافة DIVs أو معرفات أو محددات فئة إضافية. سأقوم بإضافة بعض عناصر DIV العامة، مثل المستمع والمحتوى والتذييل، لأنني أعلم أن هذه الأشياء موجودة.
من خلال وضع علامة على المستند أولاً، لن تواجه مشكلات الأقسام 1 والطبقات 2 المحكوم عليها بالفشل بالفعل /*تحتاج فقط إلى إضافة هذه الأشياء بمجرد أن تبدأ في كتابة CSS وتدرك أنك ستحتاج إلى ربط آخر ل أنجز ما تحاول تحقيقه.*/(النص الأصلي غير مترجم).
استخدم محددات CSS الفرعية لتحديد العناصر الفرعية، ولا تقم فقط بإضافة فئة أو محدد معرف إلى عنصر ما بشكل ميكانيكي. تذكر: CSS لا قيمة له بدون مستند منسق جيدًا (أو بنية ترميزية).
تلخيص
يمكن أن يساعدني ذلك في كتابة كود CSS بشكل أفضل. ولكن هذا لا يعني نهاية هذه القائمة. بعد ذلك، سأحضر بعض الأشخاص الآخرين لمشاركتها معك.