Minified CSS in javascript file - Why?

Question

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!

what else is in the file? maybe they're combining the CSS in a JS file to reduce round trips? — Michael Coker
– Michael Coker, Commented Apr 12, 2017 at 22:08
The file was too big to view in github, but here is the raw version: raw.githubusercontent.com/tobias-dv-lnu/1dv600-lab/Node/client/… — Jesper
– Jesper, Commented Apr 12, 2017 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
– Barmar, Commented Apr 12, 2017 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
– Jesper, Commented Apr 12, 2017 at 22:17
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
– Barmar, Commented Apr 12, 2017 at 22:20

Mouser · Accepted Answer · 2017-04-12 22:27:27Z

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.

Community · Accepted Answer · 2017-05-23 12:09:46Z

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?

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Apr 12, 2017 at 22:21

fr3dgentil

312 bronze badges

2 Comments

Jesper Over a year ago

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..?

fr3dgentil Over a year ago

The only drawback I see is that, if the user deactivates javascript, the css won't load.

Collectives™ on Stack Overflow

Minified CSS in javascript file - Why?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related