استخدام التقليل من سمات أسلوب الحشو صريح

Question

وأنا وجدت أنا أكتب الكثير من التعليمات البرمجية التي تبدو مثل هذا:

           <div id="leftCol">

                <div style="padding-top:10px">
                    <asp:Image ID="imgRazor1" ImageUrl="http://www.example.com/dynimg.aspx?imageKey=XXX" runat="server" />
                </div>

                   <div style="padding-top:10px">
                    <asp:Image ID="imgRazor2" ImageUrl="http://www.example.com/dynimg.aspx?imageKey=XXX_CART" runat="server" />
                </div>

                <div style="padding-top:20px; padding-bottom:15px">
                    <asp:Image ID="Image3" ImageUrl="~/images/announcements/announcement1.jpg" runat="server" />
                    <div style="font-size:x-small">(from example.com)</div>
                </div>
            </div>

وولهذا يقول أنا أضع الكثير من الحشو صريح أو الهوامش.

وأنا أتساءل ما هو أفضل أسلوب لذلك هو دون تنتهي مع أسماء فئة مثل هذه:

.mediumPadding {
    padding-top:10px;
}

.smallPadding {
    padding-top:5px;
}

.padding15 {
    padding: 15px
}

عند أنا ترميز المحتوى الفعلي مثل هذا في مقابل التخطيط الشامل لأكثر عمومية أنا أميل لتجد أن أحجام الحشو محددة هي أكثر ملاءمة. أنا أجد نفسي تغيير من 8px ل11px ومن ثم العودة إلى 9px. يجب أن يكون المصمم في لي، ولكن أنا لا أحب هذه العادة أنني تشكيل.

وأنا لا أرى نفسي أن تكون قادرة على إعادة النظر في قاعدة العالمية التي تقول "الحشو المتوسط" هو 9px وتغييرها إلى 11px وتتوقع نتائج مرضية. قد جعل بعض الصفحات تبدو أجمل وجعل الخراب الآخرين.

وماذا يفعل الآخرون في حل هذه المشكلة؟ أريد فوائد المغلق، ولكن أنا بحاجة مراقبة دقيقة.

Answer 1

والتعليمات البرمجية يعاني من حالة خطيرة من شعبة-يتيس. وأود أن تبدأ أولا باستخدام علامات المناسبة لرؤوس الفقرات، وما إلى ذلك وبمجرد الانتهاء من وثيقة ملحوظ المتابعة بشكل صحيح، يمكنك إضافة فئات لعناصر مشتركة، ثم أسلوب تلك الفئات حسب الضرورة. ستجد أن أنواع معينة من العناصر تشترك في أسلوب بغض النظر عن مكان وجودهم، حتى تتمكن من تقليل كمية مضمنة التصميم.

وينبغي أن تعكس الفصول الدراسية سمة من العنصر (على سبيل المثال "عنوان"). بشكل عام، يجب أن الطبقات لا يشير إلى تنفيذ تصميم معين. HTML هي 'ما'، CSS هو "كيف". عند استخدام فئات CSS التي تمثل تفاصيل التصميم، وكنت حقن كيف إلى HTML الخاص بك.

و(نعم، وأحيانا تحتاج هذه القواعد لا بد من كسرها، ولكن تلك هي الاستثناءات).

Answer 2

وكل هذه عناصر div سيكون لها الغرض. والسبب انهم عومل بشكل مختلف. تجد أن وإعطاء تلك عناصر div وهو الاسم الذي يعكس المحتوى.

<div id="leftCol">
  <div class="navigation"></div>
  <div class="calendar"></div>
</div>

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

Answer 3

هل يمكن أن يكون قاعدة عامة وتجاوز ذلك مع قواعد معرف في حالات محددة إذا لزم الأمر:

#leftCol > div { /* general rule */ }
#img1 { /* custom override 1 */ }
#img2 { /* custom override 2 */ }

Answer 4

وغالبا ما يكون أول وآخر عنصر في وعاء تتطلب معاملة خاصة. يبدو أن هذا هو الحال في المثال الخاص بك.

وومحددات الطفل الأول والأخير للطفل ليست موثوقة جدا عبر المتصفحات حتى الان (في الغالب بسبب IE6)، لذلك يمكنك إما إضافة فئات يدويا للعنصر الأول والأخير أو استخدام قليلا من جافا سكريبت لمساعدتك - النسل يفعل ذلك بشكل لطيف.