How JS and CSS Frameworks Ruin the Web

on

Dušan Lukic is his blog gives some very valid arguments on how the web is being ruined by the use of CSS frameworks like Bootstrap and  the popularity of  Angular.js and similar javascript frameworks.

He goes on to show how frameworks have become such an integral part of easy website building that many are learning the framework only. The result being that they are not aware of the problems that they can cause.


Although modern Javascript frameworks probably make programming Javascript a lot easier, decoupled and with greater implementation of good programming practices, they are actually making the final product worse.
His description of how these frameworks interfere with the HTML5 specification and  semantic markup is spot on.

My intention was to talk generally about the idea in this article. I don’t do much frontend stuff, so I am not going to discuss the actual development of Angular or Bootstrap apps, but rather the consequences it creates.

An example of the problem is found in frameworks like Meteor and Backbone js.

"click .remove-link": function(event) {
  event.preventDefault();
  this.remove();
}

When the mark-up for the above code is set then you see that it breaks some of the rules for good semantic markup and also ruins the "separation of concerns" by making the class and id selector do multiple jobs.

<a href="#" class="remove-link">Remove this</a>

Jquery

Everyones favorite framework, Jquery, is also a cause of duplicitous behaviors in code. Changing selector names in a Jquery based application will break it. The use of Jquery .addClass() to set an attribute to perform an action on is probably the most common code technique used. When a web designer needs to update or change the style of an element and chooses to do so via the selectors CSS behavior. Which is the correct way so they can hardly be faulted for it. But it most likely will lead to broken or conflicted code.

Workarounds

Sometimes you will find workarounds like the one used for syntax highlighter used on this page.

 <pre class="brush:javascript">

But although this fixes the problem with breaking the application and partially for the separation of concerns it does nothing for the errant mark-up.

Use HTML5 to fix it all


One of the best ways to fix the abuse of HTML5 semantics is to use the HTML5 data attribute. The following code is an example of the new data attributes.


Lorem ipsum dolor sit amet, consectetur adipiscing elit...

The above code is valid markup, separates the style and logic while allowing for better semantics in both. Afterwards you can use the Jquery  data() function.
  
$('.widget').each(function(){
     alert($(this).data("name"));
      alert($(this).data("noob"));
});
 
There you go, some consequential problems and solutions in the same technology. Now it's just a matter of refactoring all your apps. See ya!

Comments

Post a Comment