Practice to sync JavaScript and CSS?

Question

I am working on a large JavaScript heavy application. Several parts of JavaScript have some related CSS rules. Our current practice is that for each JavaScript file there is an optional linked CSS file , for example:

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

This way, I know that all CSS related to MyComponent.js will be in MyComponent.css .

But the fact is that too often I have very little CSS in these files. And too often, I feel that it takes too much effort to create an entire file to just contain multiple lines of CSS - it would be easier to just hardcode the styles inside JavaScript. But it will be the way to the dark side ...

Lately, I have been thinking about embedding CSS directly in JavaScript , so it can still be extracted during the build process and combined into one large CSS file. This way, I would not need to create a new file for every small piece of CSS. Also, when I move / rename / delete a JavaScript file, I don’t need to additionally move / rename / delete the CSS file.

But how to embed CSS inside JavaScript? In most other languages, I would just use a string, but JavaScript has some problems with multi-line strings. The following looks IMHO pretty ugly:

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

What other methods do you have for synchronizing JavaScript and CSS?

Answer 1

My perspective on CSS files is that they describe the rules that define the theme of the application. Best practices usually suggest that content, presentation and behavior should be kept separate, so it’s relatively easy to change the subject. Having multiple CSS files makes this a bit more complicated as the designer will have more files to process.

In addition, CSS (Cascading StyleSheets) rules depend on their position in the CSS document. Having in each case several CSS files with different rules, it can be difficult to prioritize which rules take precedence.

Finally, if you want to find out which CSS selector in your JS file matches that CSS file, try using a cool search tool like grep if you are using linux. If you use a good IDE, you can also use it to quickly find rules, then you can just go to the line number. I really don't see the benefit of following CSS rules in different files; this will only complicate the situation.

In addition, I would advise you to abandon the idea of ​​embedding CSS. By doing this, you inevitably complicate the ability for your web designer to quickly and easily change styles. The whole point of external CSS is that your web designer can change the theme or provide multiple themes for different users. If you embed CSS in JavaScript or HTML, then you tightly connect content, behavior, and presentation.

Best practices typically preserve content, behavior, and presentation separately for this very purpose.

Answer 2

Having one CSS file for a JS file seems good to me. It is clean, easy to understand and maintain. The only problem would be to have dozens of CSS files on each page, but I suppose you will combine these files into one large file, so this problem does not exist in your case.

How to embed CSS in JavaScript? It depends on the environment you have and on how the build process is performed. The easiest way is to have a big comment at the beginning of each JavaScript file, something like this:

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

Then at build time you need to look for the <css>...</css> blocks and extract the CSS by trimming /* and */ .

Of course, this creates a problem: if you use an autocomplete IDE, embedding CSS in a JavaScript file will make it impossible to use autocomplete in this case.

Answer 3

My preferred method is to save all the CSS files separately, and then create a build process that compiles them into a larger CSS file when deployed.

I would avoid merging your JS with your CSS. It may sound like a cleaner solution from the file level, I think it will be messy. This and you will lose the highlighting and syntax support provided by your editor.

Answer 4

Check out Csster . I wrote this to solve this problem.

You embed your CSS rules directly in your Javascript using the Javascript object literal syntax. This is no more ugly than the original CSS.

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

Rules are inserted into the client-side DOM. This architecture simplifies the build process and reduces the number of client requests.

You can use it as described, but Csster also provides a couple of other subtleties:

• Nested style sheets DRY up
• color features like darken and saturate
• built-in macros for common CSS idioms like clearfix, rounded corners, print shadow. A.
• extension points for user behavior or cross-browser support.

This is well tested and I have used it in several projects. It does not depend on jQuery, but works well with it.

I would like more people to use it and provide feedback.