LESS/SASS CSS opuesto a la minificación/optimizaciones?

Question

Me pregunto si puedo decir que los preprocesadores LESS/SASS CSS "(creo que se llaman?)" es lo opuesto a las optimizaciones como la minificación? Me pregunto si habrá algún impacto notable en el rendimiento. o ¿crees que la facilidad de desarrollo es más importante?

Lo pregunto porque lo CSS MENOS genera es algo así como

body #div1 #div2 p 
body #div1 #div2 p a:link, body #div1 #div2 p a:visited 
... 

y creo que lo que realmente puede hinchar mi CSS un poco. como puede ver, dicha especificidad no es necesaria y hace que leer CSS sea difícil (al menos lo que veo en Firebug).

Answer 1

Te sorprendería, pero los archivos CSS con gzip que tienen bloques de código repetidos no deberían ser demasiado más grandes que los que tienen los selectores más cortos.

Esto es gracias a cómo el algoritmo de compresión maneja cadenas duplicadas en un archivo. En lugar de incluir la misma cadena dos veces, reemplaza la segunda ocurrencia con una referencia a la primera, y esa cadena solo aparece en el archivo comprimido una vez. Observe qué tan repetitivos son los selectores en su archivo CSS generado; esto debería hacer que se compriman bastante bien.

Naturalmente, la clave para esto es asegurarse de que sus archivos CSS tengan gzip; dejarlos descomprimidos definitivamente aumentará el tamaño del archivo.

Answer 2

Dependiendo del options, SASS puede dar salida en diferentes estilos. Para la producción, deseará establecer el estilo de salida en 'compacto'.

Answer 3

En Sass puede controlar la 'hinchazón de la especificidad' entendiendo cómo funciona nesting. No es necesario anidar en absoluto si no lo desea; es algo que puede controlar.

Usando el nuevo @extend directive, en realidad se puede reducir redundancia en el CSS mediante la aplicación de los priciples de de OOCSS y por lo tanto puede mejorar rendimiento. Aquí hay un buen artículo para get you started with @extend. Y unos pocos más recursos OOCSS:

• http://www.stubbornella.org/content/category/general/geek/css/oocss-css-geek-general/
• http://wiki.github.com/stubbornella/oocss/faq
• http://oocss.org/

La gran ventaja de @extend en Sass es que toma el esfuerzo manual que participan en la aplicación de OOCSS y lo hace maravillosamente sin dolor y fácil.

Finalmente, como señaló Andrea, Sass tiene una variedad de opciones para minificar CSS (ver :compressed style), así que, en general, tienes un juego de herramientas bastante potente no solo para mejorar tu rendimiento como desarrollador, sino también el rendimiento de tu CSS. Para ver un ejemplo de esto en acción, vea cómo Chris Eppstein, autor de Compass y colaborador principal de Sass, refactors the Digg stylesheet bajó de 125 líneas de código a 85 líneas de código (una reducción del 32%).

Answer 4

Hay un complemento firebug para sass que debería facilitar las cosas para leer. En realidad, no es necesario que lea la salida directamente de todos modos.

Sass, less y xCSS generarán más salida, pero yo no lo llamaría hinchazón.

CSS escritos a mano, con muchas redundancias y duplicaciones, se degradarán rápidamente a medida que los desarrolladores acumulen espacios de nombre encima de otros durante el ciclo de vida del código. Uno de los síntomas del software mal mantenido, diseñado o escrito es la hinchazón. Y debido a que CSS tiene algunas deficiencias de diseño desde el principio, incluso los mejores codificadores CSS se ven afectados por esta limitación.

Así que tienes que sopesar la huella inicial de tu archivo sass/less formateado con un archivo CSS escrito a mano que se ha editado varias veces.

Otro beneficio en sass es que su HTML se vuelve más simple. No necesita agregar nombres de clase en todo su código para compensar la estructura plana y global de CSS.