The company accountable

We all know that front-end HTML and CSS, as well as JS are different division of labor, these three are actually responsible for their own responsibilities, web development from the beginning of the framework to do the separation of responsibilities, so that can avoid mixed use, resulting in very complex applications.

Write a little chestnut to explain it, and you’ll be amazed at the end of it.

We’ll write a div with a span in it, and when we click button add the div background color and the SPAN font color. It’s very simple. Let’s look at the code.

<body>
    <div style="width: 100px; height: 100px;">
        <span>I'm Jackson the Bear</span>
    </div>
    <button>Click change div color</button>
</body>
<script>
    const btn = document.querySelector('button');
    btn.addEventListener('click'.() = > {
        let div = document.querySelector('div');
        let span = document.querySelector('span');
        div.style.backgroundColor = '#99bb88';
        span.style.color = '#fff';
    }) 
</script>
Copy the code

This code seems to be fine, so let’s think about whether there’s room for optimization and focus on the individual responsibilities. If someone else is reading our code, and there’s a lot of code, it’s not easy for them to tell what we’re writing. When we modify the style, we use the CSS property directly, but we can give it directly to the class.

    <style>
       .change{
           background-color: #99bb88;
        
       }
       .change span{
           color: #fff;
       } 
    </style>
</head>
<body>
    <div style="width: 100px; height: 100px;">
        <span>I'm Jackson the Bear</span>
    </div>
    <button>Click change div color</button>
</body>
<script>
    const btn = document.querySelector('button');
    btn.addEventListener('click'.() = > {
        let div = document.querySelector('div');
        let span = document.querySelector('span');
        div.className = 'change';
    }) 
Copy the code

The above method is to add a class, we can read the code to find the name of the class to know what operation. But this is not enough optimization, we think about this is a pure CSS responsibility, there is no need for JS to participate in the operation.

The best code is not to write code! Let’s do it with pure CSS

    <style>

       #checkbox:checked + .change{
           background-color: #99bb88;
       } 
       #checkbox:checked + .change span{
           color: #fff;
       }
       #checkbox{
           display: none;
       }
       label{
           border: 1px solid #ccc;
           display: inline-block;
           padding: 10px;
       }
    </style>
</head>
<body>
    <input id="checkbox" type="checkbox" >
    <div class="change" style="width: 100px; height: 100px;">
        <span>I'm Jackson the Bear</span>
    </div>
    <label for="checkbox">Click change div color</label>
  
</body>
Copy the code

Did you see how surprised you were by this method. Instead of writing JS code, we use the CSS checkbox event to do the processing.

There are some problems with this, such as the fact that the state cannot be saved after the page is refreshed. This is where JS comes in. But pure display class we still try to pursue zero JS.

conclusion

  • HTML, CSS and JS should do their job
  • Unnecessary direct manipulation of styles by JS should be avoided
  • You can use class to represent state
  • Pure presentation class interaction seeks zero JS scheme