A colleague of mine recently took advantage of LESS in a simple but very useful way.
/* Relatively positioned dialog overlay. */ @z-index-dlg-rel-overlay: -2; /* Position of box shadow to dialog. */ @z-index-dlg-box-shadow: -1; /* Close button on dialog boxes. */ @z-index-dlg-close: 1; /* Overlay on the dialog itself making it "disabled." */ @z-index-dlg-disabled: 2; /* Modal dialog position. */ @z-index-dialog: 100; /* Main window overlay for dialog. */ @z-index-dlg-overlay: 1000; /* Position of main (topmost) dialog. */ @z-index-dlg-main: 10000; /* Main content loading spinner. */ @z-index-cnt-loading: 1; /* Position of orangle flag triangle on auth pages. */ @z-index-ath-triangle: 1; /* Absolutely positioned delete (X) button. */ @z-index-btn-delete: 10; /* Position of downward triangle on content title. */ @z-index-tri-title: 5; /* Position drawers below dialogs. */ @z-index-drawer: @z-index-dialog - 1; /* Position of floating navbar. */ @z-index-navbar: 1000; /* Position of popup about menu. */ @z-index-nav-about: 100; /* Position of search box on nav menu. */ @z-index-nav-search: 1;
He gathered every z-index on the site into a single LESS file as a variable. Now whenever you add something with a z-index you can think about “yes, I want it on top but not over the floating nav or a modal dialog” rather than just jamming 999999 and hoping for the best. Neat!