Mejores Prácticas de archivos CSS Magento

Question

Tengo algunas preguntas acerca de los archivos CSS entregados con Magento y las mejores prácticas para hacer cambios en ellos.

En primer lugar yo no era capaz de encontrar una descripción básica de todos los archivos CSS que vienen con Magento. Por ejemplo, cuando se utiliza el archivo reset.css?

Pero mi pregunta es, ¿por qué Magento está haciendo casi todo en el styles.css por defecto? ¿No sería una mejor idea de dividir el css en varios archivos más pequeños y cargar los del archivo local.xml para los diferentes puntos de vista? Esto permite más control sobre el estilo de los elementos.

Por ejemplo, uno podría crear un archivo css para la representación simplificada de productos y cargar el archivo en local.xml y otra para productos agrupados.

Otra pregunta que tengo es, sobre los estilos -moz- *. ¿Por qué están en el styles.css y no en un archivo específico css Firefox? Si utilizo Opera (o cualquier otro navegador) que muestran este estilos como errores porque no saben acerca de ellos.

Answer 1

Pero mi pregunta es, ¿por qué Magento está haciendo casi todo en la styles.css por defecto? ¿No sería una mejor idea de dividir la css en varios archivos más pequeños y cargar los del archivo local.xml para los diferentes puntos de vista? Esto permite un mayor control sobre el estilo de los elementos.

No, no sería mejor. archivos CSS separadas daría lugar a más solicitudes HTTP lo que ralentizaría su sitio web. Creo que tiene 2 opciones:

1) Permanezca con 1 gran archivo CSS, pero Minify que

2) dividirlos en varios archivos más pequeños para facilitar la lectura por sí mismo y hacer que se combinan de forma automática mediante el uso de la Fooman Speedster Magento extensión .

Otra pregunta que tengo es, sobre los estilos -moz- *. Por qué están en la styles.css y no en un archivo específico css Firefox? Si utilizo Opera (O cualquier otro navegador) que muestran este estilos como errores porque no saber de ellos.

Que yo sepa se considera la práctica general a hacerlo de esta manera. Hay más inconvenientes en la escritura de cada estilo específico del navegador en archivo separado.

Por ejemplo sólo tiene que añadir que como esto para las esquinas redondeadas:

.rounded-corners {
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
}

En función de qué navegador del visitante está utilizando el estilo correspondiente se aplicará. Los navegadores que no soportan estas propiedades sólo le mostrará esquinas cuadradas.

Answer 2

Tiene que ver esto desde ambos lados.

• El navegador, descarga y procesamiento del contenido
• El desarrollador, escritura / edición / administración de CSS

Un navegador quiere menor número de archivos necesarios, combinados y miniaturizada. Como tener así como idealmente como poco y como CSS simple como sea posible (es decir. No tener 1+ niveles de dependencia jerárquica).

Sin embargo, un desarrollador podría tener dificultades para gestionar todo en un solo documento, o les resulta menos productivo al trabajo de esa manera.

Esto es realmente por qué existe el procesamiento de CSS (por ejemplo. SASS / menos). De modo que usted puede tener CSS sencillo, limpio y comentado, estructurado como usted quiera, pero lo que el navegador obtiene es un archivo combinado y el archivo optimizado. Por lo que este le da lo mejor de ambos mundos.

Siendo realistas, sólo necesita 2 hojas de estilo (impresos y de pantalla) - a pesar de los nuevos navegadores sólo puede hacerlo a través de preguntas de los medios.

En lo que se refiere a la entrada de CSS, hacer lo que hace que el desarrollo más cómodo para usted. Pero en lo que se refiere a la producción, tratar de asegurarse de que tiene el menor número de archivos, optimizada y de-engañados como sea posible.