GMK HUSSAIN - BLOGS

How to name CSS classes Naming things is the hardest thing in computer science, but, in CSS, you're naming things all day long... Based on my favorite articles on the topic, and recent work experience, here are my 2 cents about how to properly name CSS classes. 0. Before to think about class name, give a good name to HTML elements If it’s an input, use the  input  element. It will be far easier for the reader to scan the HTML document. Example : <div class= 'submit' /> <!-- Wooot ? --> <input class= 'submit' /> <!-- Ah, ok --> Source  :  Raphael Goetter (french article) 1. Put the class name at the lowest possible level It impact how classes will be named. Always use the class name directly on the HTML element you want to style, even if seems to cost an extra effort. Check the article of Chris Coyer below if it is not clear why. Example : <main class= 'mainly' > <p> Lorem ipsum ...

This can now be done in Chrome, Safari, FF4+, and IE10pp4+! Example: function processAjaxData ( response , urlPath ){ document . getElementById ( "content" ). innerHTML = response . html ; document . title = response . pageTitle ; window . history . pushState ({ "html" : response . html , "pageTitle" : response . pageTitle }, "" , urlPath ); } You can then use  window.onpopstate  to detect the back/forward button navigation: window . onpopstate = function ( e ){ if ( e . state ){ document . getElementById ( "content" ). innerHTML = e . state . html ; document . title = e . state . pageTitle ; } };

To get the path, you can use: var pathname = window . location . pathname ; // Returns path only var url = window . location . href ; // Returns full URL

The  jQuery  library provides loading functionality  in one line : $ . getScript ( "my_lovely_script.js" , function (){ alert ( "Script loaded but not necessarily executed." ); });

// Checks for display:[none|block], ignores visible:[true|false] $ ( element ). is ( ":visible" );

jQuery is not necessary, and   window.location.replace(...)   will best simulate an HTTP redirect. It is better than using  window.location.href = , because  replace()  does not keep the originating page in the session history, meaning the user won't get stuck in a never-ending back-button fiasco. If you want to simulate someone clicking on a link, use  location.href . If you want to simulate an HTTP redirect, use  location.replace . Example: // similar behavior as an HTTP redirect window . location . replace ( "http://domain.com" ); // similar behavior as clicking on a link window . location . href = "http:// domain .com" ;