Twitter Bootstrap Question posted in

Minified CSS in javascript file – Why? – Twitter bootstrap

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!

Tags:

2

Answers


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

    Login or Signup to reply.
  2. 0

    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.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search