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