Prácticas para el mantenimiento de JavaScript y CSS en la sincronización?

Question

Estoy trabajando en una aplicación grande JavaScript-pesado. Varias piezas de JavaScript tienen algunas reglas CSS relacionados. Nuestra práctica actual es que cada archivo JavaScript para tener un archivo CSS relacionado opcional , así:

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

De esta manera sé que todos los CSS relacionados con MyComponent.js estará en MyComponent.css.

Pero la cuestión es que con demasiada frecuencia muy poco CSS en esos archivos. Y con demasiada frecuencia siento que es demasiado esfuerzo para crear un archivo completo a sólo contiene algunas líneas de CSS - sería más fácil simplemente codificar los estilos dentro de JavaScript. Pero esto sería el camino al lado oscuro ...

Últimamente he estado pensando en incrustar el CSS directamente en el interior de JavaScript - por lo que todavía podría ser extraído en el proceso de construcción y se combinan en un solo archivo CSS grande. De esta manera no tendría que crear un nuevo archivo CSS por cada pequeña pieza. Además cuando muevo / renombrar / borrar el archivo JavaScript que no tengo a moverse, además, / renombrar / borrar el archivo CSS.

Pero cómo CSS incrustar dentro de JavaScript? En la mayoría de los otros idiomas me acaba de utilizar cuerdas, pero JavaScript tiene algunos problemas con líneas múltiples. Los siguientes se ve bastante feo en mi humilde opinión:

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

¿Qué otras prácticas que tienen para mantener el JavaScript y CSS en sincronía?

Answer 1

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

Además, hojas de estilo en cascada (CSS) reglas se ven afectados por su posición en el documento CSS. Al tener varios archivos CSS con reglas diferentes en cada uno, puede ser más difícil de priorizar qué reglas tienen prioridad.

Por último, si usted quiere saber lo que el selector CSS en sus partidos archivo JS qué archivo CSS, trate de usar una herramienta de búsqueda fresco, como grep, si estás en Linux. Si estás utilizando un IDE buena, también se puede utilizar para buscar rápidamente las reglas, a continuación, puedes saltar al número de línea. Realmente veo ninguna ventaja en el mantenimiento de las reglas CSS en diferentes archivos; que sólo complicaría las cosas.

Además, yo le aconsejaría en contra de la idea de poner el CSS en línea. Al hacer esto, que, inevitablemente, hacer que sea más difícil para su diseñador de páginas web de forma rápida y fácil intercambiar los estilos. El punto de CSS externo es lo que su diseñador de páginas web puede cambiar el tema o proporcionar múltiples temas para diferentes usuarios. Si incrusta el CSS en el código JavaScript o HTML, entonces has de estructura rígida del contenido, el comportamiento y la presentación.

Las mejores prácticas generalmente sugeriría mantener el contenido, el comportamiento y la presentación por separado para este mismo propósito.

Answer 2

Tener un archivo CSS por archivo JS parece una cosa buena para mí. Es limpio y fácil de entender y de mantener. El único problema sería tener docenas de archivos CSS en cada página, pero supongo que se combinan dichos archivos en un archivo grande, por lo que este problema no existe en su caso.

Cómo incrustar CSS en JavaScript? Depende del medio ambiente que tiene, y cómo se realiza el proceso de construcción. Lo más fácil es tener un gran comentario 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>

A continuación, durante la construcción, hay que buscar bloques <css>...</css> y extraer el CSS por el recorte de la /* y */.

Por supuesto, se crea un problema:. Si está utilizando un IDE con auto-completado, la incorporación de CSS en un archivo JavaScript hará que sea imposible el uso de auto-completado en este caso

Answer 3

Mi método preferido es mantener todos los archivos CSS se separan y luego tener un proceso de construcción que recopila en un archivo CSS más grande en la implementación.

Yo evitaría la fusión de sus JS con su CSS. Puede sonar como una solución más limpia desde el nivel de archivo, creo que va a llegar rápido desordenado. Eso, y si no se pierden el relieve y la sintaxis de asistencia su editor le da.

Answer 4

Csster . Lo escribí para resolver este problema solo.

incrustar las reglas CSS directamente en su Javascript, usando la sintaxis literal de objeto JavaScript. Es más feo que hay CSS prima.

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

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

Puede usarlo como usted describe, pero Csster también proporciona un par de otros detalles:

• anidación para secar las hojas de estilo
• Funciones de color como darken y saturate
• incorporado en las macros de expresiones idiomáticas comunes CSS como clearfix, esquinas redondeadas, sombras.
• puntos de extensión para un comportamiento personalizado o soporte multi-navegador

Está bien probado y lo he usado en un buen número de proyectos. Es independiente de jQuery, pero juega bien con él.

Me encantaría tener más personas lo utilizan y proporcionan retroalimentación.