¿Prácticas para mantener sincronizados JavaScript y CSS?

Estoy trabajando en una gran aplicación de JavaScript. Varias piezas de JavaScript tienen algunas reglas CSS relacionadas. Nuestra práctica actual es que cada archivo JavaScript tenga una opción archivo CSS relacionado, al igual que:

MyComponent.js  // Adds CSS class "my-comp" to div
MyComponent.css // Defines .my-comp { color: green }

De esta manera sé que todo CSS relacionado con MyComponent.js Estará en MyComponent.css.

Pero la cuestión es que, con demasiada frecuencia, tengo muy poco CSS en esos archivos. Y con demasiada frecuencia siento que es demasiado esfuerzo crear un archivo completo que solo contenga unas pocas líneas de CSS; sería más fácil codificar los estilos dentro de JavaScript. Pero este sería el camino hacia el lado oscuro ...

Últimamente he estado pensando en incrustando el CSS directamente dentro de JavaScript - por lo que aún podría extraerse en el proceso de compilación y fusionarse en un archivo CSS grande. De esta manera, no tendría que crear un nuevo archivo para cada pequeña pieza de CSS. Además, cuando muevo / renombro / elimino el archivo JavaScript, no tengo que mover / renombrar / eliminar adicionalmente el archivo CSS.

Pero, ¿cómo incrustar CSS dentro de JavaScript? En la mayoría de los otros lenguajes, solo usaría cadenas, pero JavaScript tiene algunos problemas con las cadenas de varias líneas. En mi humilde opinión, lo siguiente se ve bastante feo:

Page.addCSS("\
  .my-comp > p {\
    font-weight: bold;\
    color: green;\
  }\
");

Que otras practicas tienes para mantener su JavaScript y CSS sincronizados?

preguntado el 08 de enero de 11 a las 21:01

4 Respuestas

Mi perspectiva sobre los archivos CSS es que describen reglas que definen el tema de una aplicación. Las mejores prácticas generalmente establecen que el contenido, la presentación y el comportamiento deben mantenerse separados para que sea relativamente fácil cambiar ese tema. Al tener varios archivos CSS, esto se vuelve un poco más difícil, ya que un diseñador tendría más archivos con los que lidiar.

Además, las reglas CSS (Cascading StyleSheets) se ven afectadas por su posición en el documento CSS. Al tener varios archivos CSS con diferentes reglas en cada uno, puede resultar más difícil priorizar qué reglas tienen prioridad.

Finalmente, si desea averiguar qué selector de CSS en su archivo JS coincide con qué archivo CSS, intente usar una herramienta de búsqueda genial, como grep, si está en Linux. Si está usando un buen IDE, también puede usarlo para buscar rápidamente las reglas, luego puede saltar al número de línea. Realmente no veo ninguna ventaja en mantener las reglas CSS en diferentes archivos; solo complicará las cosas.

Además, desaconsejaría la idea de poner CSS en línea. Al hacer esto, inevitablemente le resultará más difícil a su diseñador web cambiar los estilos rápida y fácilmente. El objetivo del CSS externo es que su diseñador web pueda cambiar el tema o proporcionar múltiples temas para diferentes usuarios. Si incrusta el CSS en JavaScript o HTML, habrá acoplado estrechamente el contenido, el comportamiento y la presentación.

Las mejores prácticas generalmente sugieren mantener el contenido, el comportamiento y la presentación separados para este mismo propósito.

Respondido el 09 de enero de 11 a las 00:01

Usted señala que la temática es válida en la que no había pensado mucho. Aunque actualmente no tenemos temas, no lo descartaría para el futuro, al menos para la combinación de colores. Pero todavía consideraría la mayor parte de nuestro CSS estructural, no realmente sujeto a la temática. Pero como dije, estás planteando un punto válido. - René Saarsoo

En cuanto a la naturaleza en cascada de CSS, trato de confiar principalmente en la especificidad de los selectores, no en su orden. - René Saarsoo

Pero definitivamente no voy a volver a colocar todo el CSS en uno o pocos archivos. Ya lo hicimos de esa manera al principio y fue una pesadilla de mantenimiento. - René Saarsoo

@Rene: ¿Puedes describir qué hizo que fuera tan difícil de mantener? En mi experiencia, es todo lo contrario. Tuve que cambiar el tema de una de nuestras aplicaciones y su herramienta para siempre porque tuve que revisar varios archivos. En muchos casos, las reglas se duplicaron, por lo que fue un trabajo más ajetreado ya que hice modificaciones similares una y otra vez. Me sentí más como un trabajo pesado que como una ingeniería de aplicaciones. En este caso, se habría ahorrado tiempo si no hubiera cambiado constantemente los mismos colores una y otra vez. Tengo curiosidad por escuchar sus experiencias con CSS en menos archivos. - jmort253

Creo que es una compensación entre JavaScript y CSS de la aplicación. Para la creación de temas, le gustaría tener todo el CSS lo más separado posible de JavaScript. Para mantener JavaScript, le gustaría tener CSS lo más cerca posible del código JavaScript que lo hace referencia. En nuestro caso, creo que el lado de JavaScript es más importante: realmente tenemos JavaScript pesado y bastante bajo en CSS. - René Saarsoo

Tener un archivo CSS por archivo JS me parece algo bueno. Es limpio y fácil de entender y mantener. El único problema sería tener docenas de archivos CSS en cada página, pero supongo que combina esos archivos en un archivo grande, por lo que este problema no existe en su caso.

¿Cómo incrustar CSS en JavaScript? Depende del entorno que tenga y de cómo se realice el proceso de compilación. Lo más fácil es tener un comentario grande al principio de cada archivo JavaScript, algo como esto:

// <...>Your copyright notice here</...>

// <css>
/*
body{color:red;}
div{border:solid 10px lime;}
// ... other ugly styles.
*/
// </css>

Luego, durante la compilación, debes buscar <css>...</css> bloques y extraer el CSS recortando el /* y */.

Por supuesto, crea un problema: si está utilizando un IDE con autocompletado, incrustar CSS en un archivo JavaScript hará que sea imposible utilizar el autocompletado en este caso.

Respondido el 09 de enero de 11 a las 00:01

Los comentarios parecen una gran solución para incrustar. Para pequeños fragmentos de CSS, supongo que vale la pena cambiar el resaltado de sintaxis, etc. - René Saarsoo

Esto también me dio una idea para implementar cadenas de estilo heredoc en JavaScript: (function(){/* Your multiline text here */}).toString() - René Saarsoo

Mi método preferido es mantener todos los archivos CSS separados y luego tener un proceso de compilación que los compile en un archivo CSS más grande durante la implementación.

Evitaría fusionar su JS con su CSS. Puede sonar como una solución más limpia a nivel de archivo, creo que se complicará rápidamente. Eso y perderá la asistencia de resaltado y sintaxis que le brinda su editor.

Respondido el 09 de enero de 11 a las 00:01

Más info: Csster. Lo escribí para resolver este problema.

Incrustas tus reglas CSS directamente en tu Javascript, usando la sintaxis literal del objeto Javascript. No es más feo que el CSS sin formato.

Csster.style({
  h1: {
    fontSize: 18,
    color: 'red'
  }
});

Las reglas se insertan en el DOM en el lado del cliente. Esta arquitectura simplifica su proceso de construcción y reduce las solicitudes de los clientes.

Puede usarlo como lo describe, pero Csster también proporciona un par de otras sutilezas:

  • anidando para SECAR hojas de estilo
  • funciones de color como darken y saturate
  • macros integradas para modismos CSS comunes como clearfix, esquinas redondeadas, sombras paralelas.
  • puntos de extensión para un comportamiento personalizado o compatibilidad con varios navegadores

Está bien probado y lo he usado en bastantes proyectos. Es independiente de jQuery, pero funciona bien.

Me encantaría que más personas lo utilicen y brinden comentarios.

Respondido el 09 de enero de 11 a las 02:01

Esto parece interesante. Tengo que probarlo. Veo algunas desventajas como no poder simplemente copiar y pegar los estilos entre el archivo CSS y JavaScipt. Además, no parece haber una forma de extraer automáticamente las reglas CSS del código JavaScript. - René Saarsoo

Gracias. Mejoraré los documentos. No, no hay una manera fácil de pegar las reglas CSS existentes ... Ejecuto algunas expresiones regulares y no me lleva mucho tiempo, pero podría proporcionar una herramienta para esto si lo desea ... En cuanto a "extraer" ( yendo hacia el otro lado), iba a implementar esto, pero después de usarlo por primera vez, me di cuenta de que es realmente fácil hacer esto con Firebug. También hay un punto de extensión donde obtienes esta información dentro de Javascript. Gracias. Déjame saber como va. - ndp

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.