Minimizar el uso de atributos de estilo de relleno explícito

Question

Estoy descubriendo que estoy escribiendo mucho código que se ve así:

           <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>

Eso quiere decir que estoy poniendo mucho relleno explícito o márgenes.

Me pregunto cuál es un mejor enfoque para esto sin terminar con nombres de clase como estos:

.mediumPadding {
    padding-top:10px;
}

.smallPadding {
    padding-top:5px;
}

.padding15 {
    padding: 15px
}

Cuando estoy codificando CONTENIDO real como este en lugar de un DISEÑO general más genérico, tiendo a encontrar que los tamaños de relleno específicos son más apropiados. Me veré cambiando de 8px a 11px y luego de vuelta a 9px. Debe ser el diseñador en mí, pero realmente no me gusta el hábito que estoy formando.

No me veo capaz de volver a visitar una regla global que dice que 'relleno medio' es 9px y cambiarlo a 11px y esperar resultados satisfactorios. Puede hacer que algunas páginas se vean más bonitas y arruinar otras.

¿Qué hacen otras personas para resolver este problema? Quiero los beneficios de css, pero necesito un buen control.

Answer 1

Su código sufre un caso grave de div-itis. Primero comenzaría usando las etiquetas adecuadas para encabezados, párrafos, etc. Una vez que tenga un documento marcado correctamente, puede agregar clases para elementos comunes y luego diseñar esas clases según sea necesario. Encontrará que ciertos tipos de elementos comparten un estilo sin importar dónde se encuentren, por lo que puede minimizar la cantidad de estilo en línea.

Sus clases deben reflejar un atributo del elemento (por ejemplo, " caption "). En general, las clases no deben referirse a una implementación de diseño específica. HTML es el 'qué', CSS es el 'cómo'. Cuando usa clases CSS que representan detalles de diseño, está inyectando el cómo en su HTML.

(Sí, a veces estas reglas deben romperse. Pero esas son excepciones).

Answer 2

Cada uno de esos divs tendrá un propósito. Una razón por la que han sido tratados de manera diferente. Encuentra eso y dale a esos divs un nombre que refleje el contenido.

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

Entonces deberías poner tu relleno en la hoja de estilo. Si está volviendo al estilo en línea para elementos de diseño, entonces no está pensando en la semántica correctamente. Una vez que tenga sus clases allí, puede editar su hoja de estilo de forma rápida y sin dolor utilizando Web Developer, etc.

Answer 3

Puede tener una regla general y anularla con reglas de identificación en casos específicos si es necesario:

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

Answer 4

A menudo, el primer y el último elemento en un contenedor requieren un tratamiento especial. Parece que este es el caso en su ejemplo.

Los selectores de primer hijo y último hijo aún no son muy confiables en todos los navegadores (principalmente debido a IE6), por lo que puede agregar clases manualmente para el primer y último elemento o usar un poco de JavaScript para ayudarlo: La descendencia lo hace muy bien.