Being a front-end dev, over time I have developed my own style of coding best practices. Here are some of them.
Javascript
Before I delve any further, let me tell you that I don’t strictly follow jslint’s guidelines. The reason is that writing perfect code(according to jslint) is useful only if I and douglas crockford were programming together.
Anyways, some sample code :
;(function() {
var list = [];
var module = {
init : function() {
console.log('initialized');
}
}
})();
Commenting sample code :
/*
*
* app.js
*
* dependencies :
* mvc.js
* events.js
*
* menu :
* defaults
* templates
* pages
* controller
* routes
*
* Code conventions :
*
* Partially follow jslint
* use double quotes for strings(only if required)
* leave a space between () and {
* leave 6 spaces between main sections
* leave 3 spaces between minor sections
* leave 1 space between two functions and misc statements
*
* Lastly, emphasis on common sense rather than code conventions. Use jslint as a guide only.
*
*/
The last line is very important. I place common sense and code readability over conventions. Even if it means ignoring the linter.
Oh and I use jshint. Much better and less opinionted.
Css
My overall style of writing css and improved much over the years but I still have to settle down on one definitive style of writing css code.
Some sample code :
/* -------- $sidebar -------- */
.sidebar
{
position:absolute;
right:100%;
top:0;
width:96px;
margin-right:12px;
}
.side-links
{
display:block;
padding:12px;
text-align:center;
font-family:'dosis';
font-size:18px;
line-height:24px;
cursor:pointer;
}
.side-links:hover
{
color:#EB4749;
}
Css commenting style :
/*
Layout css
Menu :
$layout
$sidebar
$views
*/
/* -------- $layout -------- */
html, body
{
width:100%;
height:100%;
}
Note the generous amount of whitespace in the file.
Final words
Not everything is perfect.The idea of laying solid code conventions is to write better usable code which is still readable after a long time.
As time goes by, the foundation I have laid keeps getting stronger.