Is it correct to write CSS with Javascript?

Asked

Viewed 291 times

9

I see a focus on javascript frameworks, to write the 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>
<div id="style" :style="ctn">

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

</div>

This facilitates a lot because it allows the use of variables and functions, but for an extensive project, this practice would imply some problem?

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 very familiar).

css vue.js
  • 1

    It depends on your definition of a problem. If you’re going to win the same thing regardless of the maintenance effort, that’s a big problem. But if you earn by hour or by line of code, that’s guaranteed stability for a while. The work you will have to maintain your website’s visual design will only increase more and more.

  • 2

    I’ve never seen any official documentation of Vue recommending this. Even they have a solution to "approximate" the CSS of the JS code, leaving the two in the same file: the single file Components.

  • also never seen, I referred to a focus that I realized, so much so that there are several libs today for this type of technique http://cssinjs.org/? v=V9.0.0

3 answers

13


Vuejs' idea (I think it’s the same as Angularjs) to use CSS attribute definition directly in the TAG dynamically aims to make small manipulations in the DOM.

I wouldn’t particularly use it the way you did, because it’s unnecessary.

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

I believe the idea behind the definition of styles dynamically is you can use this to make changing attributes 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 through an object the value of :style, you can also use conditional expressions.

It is important to remember that if the expression of the specific property is evaluated as false, this same will be removed.

Example:

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

<!-- resultado -->
<div style="display: block;"></div>
  • 6

    The one who denied the answer could point out the error in the answer. It is valid to remember that the purpose of the vote is to assess whether the question/answer is right or wrong, and not whether or not I liked the person who answered.

  • 1

    I agree with you, I’ve changed my mind to that kind of technique

  • 4

    @sannyas Think this way to facilitate: the goal of defining css through :style in VUEJS is the same thing as you define css through $(elemento).css({...}) jQuery! You wouldn’t write all your CSS in jQuery, because it’s unfeasible and doesn’t make sense.

  • 1

    It makes sense based within a specific "ecosystem" waiting for certain types of dynamic behaviors, as in Angular or Vue. By embellishment or think that "it’s cool" doesn’t really make sense and much less will be profitable, it will just rework, for those who write the code both for the browser to do the "parse"... +1

4

I usually say that "if it is possible, it has some use", but expensive WHENEVER it is possible to apply the concept of accountability (each one takes care of what is yours), do it. Since JS comes after CSS in the "queue" of DOM your application will have a large "nothingness" appearing for 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 to the place of the texts, square rectangles to where the photo will be, and so on? That’s the Wireframe from the css page, when this appears to say that the JS has not yet loaded, then it does not leave the user with a white screen without knowing if something is happening or not.

CONCLUSION Only use when you have no other way to use CSS inline, Internal, or External, because of responsibility (adjusting the layout is not his job, JS dynamism the layout).

  • 1

    Interesting concept of responsibility, sometimes we get too used to a certain language and want to go out using for everything kk.

  • Yes vdd, hahaha

4

This can have a big impact on layout development, unless you just want to work with the static look of the framework, here comes the problem of customizing the lines of code in the js to have the look expected, since the construction of the layout within javascript will be too large.

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

Another important data to analyze is the loading of the layout which in turn loads the whole css in the onload do body and the javascript at the end of the body, due to server load, for js tends to be heavier than the js and can take time in assembling the site or system, in html structure example relies on it: 

<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 it is not advisable and advertising agencies that constantly change the Layouts, will not leave for is practical at this time.

everything will depend on how to program the workload that will be required in the maintenance of the layout.

Browser other questions tagged css vue.js

You are not signed in. Login or sign up in order to post.