Uso degli ID sul tag body

Una fra le "best practices" più consigliate, soprattutto tra gli sviluppatori di oltreoceano, è l'utilizzo di ID sul tag body. Da un punto di vista CSS, i vantaggi sono sia per gli autori che per gli utenti. Infatti con un ID diverso per le singole sezioni di un sito, è possibile dare stili diversi alle singole pagine senza modificare la marcatura. Per esempio:

body {
    background: #e0e0e0;
}
body#articoli {
    background-image: url(img/top.png);
    background-repeat: no-repeat;
    background-position: 100% 0;
}

Questo è un esempio semplice, ma con la stessa tecnica possiamo apportare modifiche più radicali:

#content-sub {
    float: right;
    width: 28%;
}
body#articoli #content-sub {
    float: left;
}

Gli utenti possono specificare degli stili utente da far caricare al browser per le singole sezioni del nostro sito. In questo modo possono personalizzare il layout secondo le proprie esigenze, e questo apporta enormi benefici all'accessibilità  dei nostri siti.

Lato scripting, invece, è possibile indirizzare determinate azioni JavaScript su determinate pagine in base alla presenza di un determinato ID. Per esempio, quello che segue è il loader che sto usando nel redesign del mio sito:

this.loader = function(page) {
        page = $(page).attr('id');
	return this.execute({
	    parameters: page,
	    method: function(parameters) {
	        switch(parameters) {
		    case 'altro':
		    case 'appunti':
		    case 'articles':
		    case 'articoli':
		    case 'author':
		    case 'code':
		    case 'demo':
		    case 'test':
		    case 'traduzioni':
		        that.normalizeBreadCrumbs();
			that.createTableFromList();
			that.setImageWidth();
			that.createFooterWrapper();
			that.wrapAcronymsWithLinks();
			that.wrapSpansWithLinks();
			that.stylizeFirstParagraph();
			that.addTableStripes();
			that.hideShowContactElements();
			that.submitContactForm();
			break;
		    case 'home':
		        that.setOpacityOnCooperationImage();
		        that.createFooterWrapper();
			that.wrapAcronymsWithLinks();
			break;
		    default:
		        break;
		}
	    }
	});
    };
//...
function init() {
    CSSZibaldone.loader('body');
}
$(document).ready(function() {
    init();
});

Con questa strategia, unita a un check sulla presenza o meno dell'elemento target su cui operare, riesco a smistare le operazioni JavaScript in modo molto più lineare rispetto al modello classico in cui viene operata solo la verifica della presenza dell'elemento target.