Is it correct to write CSS with Javascript?

Navigation
8

I see a focus on javascript frameworks, to write css directly in javascript, example ... 

new Vue({
  el : "#style",
  data : {
    ctn : {
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      flexDirection: "column",
      height: "100vh",
    },
    header : {
      fontSize: "20pt",
      color: "blue",
    },
    article : {
      fontSize: "13pt",
      color: "green",
    }
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script><divid="style" :style="ctn">

  <header :style="header">Hello world!</header>
  
  <article :style="article">StackOverflow</article>

</div>

This makes it much easier because it allows the use of variables and functions, but for an extended project, would this practice imply any problems?

Edit

I recently found this article Peace in css (Medium)

Original article

And I realized that this debate is happening vehemently on the internet (As always Brazil is not much inside.)

    
asked by anonymous 26.10.2017 / 20:18

3 answers

13

The idea of VueJS (I believe it is the same as AngularJS) in using CSS attribute definition directly in TAG dynamically aims to make small manipulations in the DOM.

I would not particularly use it the way you did as it is unnecessary.

Consider that the attributes you set there are almost static. You could perfectly use a style , or link tag to include an external style sheet.

I think the idea behind dynamically defining styles you can use this to make attribute changes strategically, as in the case of hiding a shopping button if you have no product selected: 

 <button :style="{visibility: produtos_do_carrinho.length == 0 ? 'hidden' :  'visible'">
       Comprar
 </button>

Note that in addition to setting the value of :style through an object, you can also use conditional expressions .

It is important to remember that if the expression of the specific property evaluates to false , it will be removed.

Example: 

<div :style="{color: false, display: flexibilizar == true ? 'block' : 'flex' }"></div>

<!-- resultado -->
<div style="display: block;"></div>
    
26.10.2017 / 20:57
4

I usually say that "if it is possible, it has some use", but ALWAYS it is possible to apply the concept of responsibility (each one takes care of what is yours), do it. Since JS comes after CSS in the "queue" of the DOM your application will have a large " nothing " appearing to the user before your JS is loaded.

Have you noticed that the no load of Facebook, or other platforms (mainly Google platforms), appear a gray rectangles for the place of the texts, square rectangles where the photo will be, and so on? This is the Wireframe of the page in css, when this appears to say that JS has not yet loaded, so it does not leave the user with a white screen without knowing if something is happening or not. >

CONCLUSION Just use it when you no longer have any way to use CSS inline, internal, or external, because of responsibility (adjusting the layout is not its job, JS dynamizes the layout).

    
27.10.2017 / 15:47
4

This can greatly impact the development of the layout, unless you just want to work with the static look of the framework, where there is the problem of customizing the lines of code in js to have the expected look, a

You can assign a style or call an animation of css by javascript, thus letting javascript take over rendering very dynamically, and if you have node.js or ajax for request you will see that it is very common manipulate css attributes and classes to render a table, a div

Another important data to analyze is the load of the layout which in turn loads all css in onload do body and javascript to the end of the body, because of load on the server, because js tends to be heavier than js and may take a while to mount the site or system, for example html structure is based on this: 

<html>
<head>
<link css >// carrega no inicio para deixar o layout pronto
</head>
<body>
<p>... conteúdo</p>
<script src="link css">//carrega no fim para não impactar no load da página
</body>
</html>

This for a developer of frontend is not advisable and advertising agencies that constantly change Layouts, will not leave to be practical at this time.

Everything will depend on how to program the workload that will be required to maintain the layout.

    
26.10.2017 / 20:47
How to optimize the sum of the elements of an array How to detect the page encoding with PHP?