re: CSS: From Zero to Hero VIEW POST

VIEW FULL DISCUSSION
 

I am in the stage of still learning and more inclined to want to unite the styles in the javascript program packaging:
example:

var div1 = document.createElement ('div');
div1.style ['background-color'] = 'orchid';

or

div1.style.backgroundColor = 'orchid';

or made like this and placed on the head:

    window.onload = function () {
      var StyleContent = {% raw %}`
        div {
          height: 200px;
          width: 200px;
          border-radius: 50%;
          display: inline-block;
        }
        .keyframe {
          background-color: orchid;
          animation: infinite 2s bounce;
          position: relative;
        }
        .transform {
          background-color: lime;
        }
        @keyframes bounces {
          0% {top: 0px; }
          60% {top: 100px; }
          100% {top: 0px; }
        }
        .transform: hover {
          transform: skew (7deg, 15deg);
        } `{% endraw %};
      
      var styles = document.createElement ("style");
      styles.textContent = StyleContent;
      document.head.appendChild (styles);
      / ********************************** /
      var div1 = document.createElement ('div');
      div1.setAttribute ('class', 'transform');
      div1.innerHTML = 'hover over me!';
      document.body.appendChild (div1);
      / ********************************** /
      var div = document.createElement ('div');
      div.setAttribute ('class', 'keyframe');
      document.body.appendChild (div);
    }

  

I am a traditional and natural adherent to making javascript programs. This means that I only use native javascript language and try not to use libraries or frameworks.
The tools I have are Notepad ++ and the chrome browser.
The current program is very confusing for me who is still in the stage of self-learning as a hobby.
But I survived to learn the original javascript because it was very exciting until the development of Bowser refused the original javascript to be the driving machine for the html page.

 

Hey, I wouldn't suggest this method for a couple reasons:

  1. it's going to be less performant than writing CSS in the first place, and it will likely either block page loading or create a jump in styling once the styles are applied.
  2. the separation of concerns. It's usually best practice to separate out your code into different files for HTML/CSS/JS so that you don't have one really long file to look through, plus then you know where to go to debug an issue with one of the pieces!

CSS in JS is a valid thing, but I would use a library built for that so that your code is more performant and follows best practices!

code of conduct - report abuse