In my previous mail, I highlight how it's necessary to create per-page CSS by enclosing the page in a DIV with a globally unique 'id' attribute and scoping any CSS declarations within that.
For now, I've simply prefixed every page-specific CSS statement in css/global.css with the page ID for the given page. That looks like this for the account edit page (shortened; just for demo purpose):
/******** For account editing page */
#account-tabs #H div.inputline,
#account-tabs #A div.inputline
{
overflow: auto;
}
#account-tabs #H label,
#account-tabs #A label
{
display: block;
float: left;
text-align: right;
margin-right: 0.5ex;
}
#account-tabs #H div.inputgroup,
#account-tabs #A div.inputgroup
{
float: left;
display: block;
}
As you can see, the CSS gets cluttered with #account-tabs scoping. There are CSS tools available e.g. SASS (
http://sass-lang.com/) to make that look much better. With SASS, the code would look like this:
/******** For account editing page */
#account-tabs {
#H div.inputline,
#A div.inputline
{
overflow: auto;
}
#H label,
#A label
{
display: block;
float: left;
text-align: right;
margin-right: 0.5ex;
}
#H div.inputgroup,
#A div.inputgroup
{
float: left;
display: block;
}
}
Or even shorter (and more comprehensible):
#account-tabs {
@mixin account-tabs-mixin($selector) {
#{$selector} {
div.inputline {
overflow: auto;
}
label {
display: block;
float: left;
text-align: right;
margin-right: 0.5ex;
}
div.inputgroup {
float: left;
display: block;
}
}
}
@include account-tabs-mixin("#H");
@include account-tabs-mixin("#A");
}
Unless there are objections, I'm going to create a new directory, next to the css directory, called 'scss' in which we'll store SASS files. Next to that, I'll make sure to write documentation on how to compile sass files into css files. There are even tools to compile sass files to css files immediately when they are being saved ('compass watch' from
http://compass-style.org/help/documentation/command-line/).
--
Bye,
Erik.
Robust and Flexible. No vendor lock-in.