CSS to help javascript programmer

Using JavaScript, you can easily manipulate all the characteristics of nodes on an HTML page . But, as a rule, changing the characteristics of the nodes "manually" using JavaScript tools is too time-consuming work, and requires the programmer to know the subtleties of HTML and CSS.
CSS capabilities allow most of this task to be passed on to the layout designer, and the programmer will only have to implement the manipulation of the states of these nodes. Such an approach to solving a problem allows us to bypass most of the “pitfalls” and solve many problems without special difficulties.

The simplest example is hiding / displaying a block on a page using JavaScript. This is usually done like this:

 <script>
 function hide (nodeId)
 {
     var node = document.getElementById (nodeId);
     if (node)
     {
         node.style.display = 'none';
     } 
 }
 
 function show (nodeId)
 {
     var node = document.getElementById (nodeId);
     if (node)
     {
         node.style.display = 'block';
     } 
 }
 </ script>
 <input type = "button" value = "Hide" onclick = "hide ('test')" />
 <input type = "button" value = "Show" onclick = "show ('test')" />
 <div id = "test"> Text for example.  Text for example. </ Div>

Let's see what happened .
Everything works fine here, and there is nothing to complain about. Take another example:

  <p> Mommy soap frame <span id = "lie">.  Son loves </ span> dad. </ P>
  <input type = "button" value = "Show the whole truth" />
  <input type = "button" value = "Return as it was" />

For example, by clicking on the button “Show the whole truth” we need to hide the span # lie node (span tag with the lie identifier). And when you click on the button "Return, as it was" to show this node again. Let's try to apply the same functionality to accomplish this task:

 <script>
 function hide (nodeId)
 {
     var node = document.getElementById (nodeId);
     if (node)
     {
         node.style.display = 'none';
     } 
 }

 function show (nodeId)
 {
     var node = document.getElementById (nodeId);
     if (node)
     {
         node.style.display = 'block';
     } 
 }
 </ script>
 <p> Mommy soap frame <span id = "lie">.  Son loves </ span> dad. </ P>
 <input type = "button" value = "Show the whole truth" onclick = "hide ('lie')" />
 <input type = "button" value = "Return as was" onclick = "show ('lie')" />

The result of the work check in action.
As you can see from the example, the button “Show the whole truth” performs its task as it should. But when you click on the button “Return as it was”, the text appears again, but with some distortions - completely unnecessary line breaks appear.
What is the reason? Those who know a little CSS have long understood where I'm going. The thing is that if the display property of any node is set to block, then the node becomes a block element that takes 100% of the width by default. In our case, it is necessary to set the value inline, not block. And why does the programmer know such subtleties? In this case, not necessarily.
You can go the other way - for example, change the hide function code by adding the original value to the intermediate variable. But there is a better way.
Turn the possibilities of CSS in our direction. Let's create a special CSS class hidden in which we will set the properties we need. Now it remains only to assign this class to the desired node, and it will disappear from the screen. By removing this class, he will return to the system without any problems.

 <style>
 .hidden {display: none;}
 </ style>
 <script>
 function hide (nodeId)
 {
     var node = document.getElementById (nodeId);
     if (node)
     {
         node.className = 'hidden';
     } 
 }
 
 function show (nodeId)
 {
     var node = document.getElementById (nodeId);
     if (node)
     {
         node.className = '';
     } 
 }
 </ script>
 <p> Mommy soap frame <span id = "lie">.  Son loves </ span> dad. </ P>
 <input type = "button" value = "Show the whole truth" onclick = "hide ('lie')" />
 <input type = "button" value = "Return as was" onclick = "show ('lie')" />

Now the example works as it should.
There remains, however, another problem - the case in which the node already has a class is not taken into account. Try to solve this problem by yourself.
In general, this approach can be characterized as follows: one should strive to manipulate not the characteristics of the nodes, but their states. The presence of one or another class at a node is that very state. Considering that a node can combine several classes, it is possible to reduce even quite complex manipulations to a simple scheme of switching states. And then ask the coder to prepare special rules for these states in the style sheet.
Original article