1

So we are having this school project, and are going to fix some small issues with the code. This has nothing to do with the assignment, but rather my curiousness. The static files is defined with a index.html and a app.min.js, which index.html is requiring.

In the app.min.js-file, the css is defined like this:

    var css = "/*!\n * Bootstrap v3.3.5 (http://getbootstrap.com)\n * 
    Copyright` `2011-2015 Twitter, Inc.\n * Licensed under MIT 
    (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n *//*! normalize.css`
    v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-
    family:sans`-`serif;-webkit-text-size-adjust:100%;-ms-text-size-
    adjust:100%}body{margin:0}article,aside,details,figcaption,`.....

etc.

And is somehow instantiated. What is the purpose of minifying the css to a js file like this? How do you do it? Looked at something called css-to-js but didn't get it to work...

Hope this question isn't too fussy, thankful for answers!

Nico
  • 12,493
  • 5
  • 42
  • 62
Jesper
  • 2,044
  • 3
  • 21
  • 50
  • 2
    what else is in the file? maybe they're combining the CSS in a JS file to reduce round trips? – Michael Coker Apr 12 '17 at 22:08
  • The file was too big to view in github, but here is the raw version: https://raw.githubusercontent.com/tobias-dv-lnu/1dv600-lab/Node/client/app.min.js – Jesper Apr 12 '17 at 22:11
  • It looks like they've put the CSS into JS so they can use `module.exports = css;` and load the CSS using the Javascript module facility. – Barmar Apr 12 '17 at 22:13
  • @Barmar Hmm yes, but how is it instantiated? There's only a script-tag to the app.min.js-folder in the static html-file. How does the index use the exported css from app.min.js? – Jesper Apr 12 '17 at 22:17
  • 2
    When you have a script tag that points to a `.js` file, it executes all the code in the file. Presumably there's something in there that instantiates the module and does something with the css variable. – Barmar Apr 12 '17 at 22:20
  • @Barmar Ah, of course. I found how the style is set. There is a function that creates a style-element add adds the css-string to that element. Wonder why you would put the css i a javascript file though.. – Jesper Apr 12 '17 at 22:23
  • This question is off topic here, as any answer will be just opinion. The only people who can definitively answer the question are those involved in the design of the implementation. It might be as simple as "*That's just how the content management system works*", or not. – RobG Apr 12 '17 at 23:23

2 Answers2

2

Instantiate it isn't that difficult, see the stack snippet. It could be round trips as suggested. Less server calls. Security, no one can link to your css, however that's fairly unlikely.

I personally think it's deployability. It makes sure that your project always comes with the basic CSS it needs. No dependability on extra files that need to be loaded. It's convenience, however unlikely.

app.min.js reminds me of Visual Studio projects. So it could be that this CSS is the basic for all apps. To include it in the code produces more security that it will always be deployed. As said, less files to depend on.

var css = "/*!\n * Bootstrap v3.3.5 (http://getbootstrap.com)\n * Copyright` `2011-2015 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-   family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0; color: red;}";

var style = document.createElement("style");
style.textContent = css;
document.body.appendChild(style);
text in this body should turn red.
Mouser
  • 13,132
  • 3
  • 28
  • 54
0

It's an optimization technique to load the page faster by downloading only one file but I believe it's a bad practice to put the css in a javascript file.

How do you add CSS with Javascript?

Community
  • 1
  • 1
fr3dgentil
  • 31
  • 2
  • Hmm, yes I agree, but in this scenario they've created a minified css-string and fed it by a function that creates only a style-element and brings along the css-string. I wonder if that is still considered bad practice..? – Jesper Apr 12 '17 at 22:26
  • The only drawback I see is that, if the user deactivates javascript, the css won't load. – fr3dgentil Apr 12 '17 at 22:42