Joe,
I've noticed that when creating custom styles for the various modules aside from the initial style, that overriding the initial style can get really messy. For visual reference, this would be the initial styling for the .rsstitle:
.rsstitle {
background: none repeat scroll 0 0 #F2F2F2; /* For Older Borwsers That Do Not Support Linear Gradients, AKA IE8 on Down */
background: -webkit-linear-gradient(top, #F2F2F2, #EEE) repeat-x scroll 0 0 transparent; /* WebKit Browser Support */
background: -moz-linear-gradient(top, #F2F2F2, #EEE) repeat-x scroll 0 0 transparent; /* Older Mozilla Browser Support */
background: -o-linear-gradient(top, #F2F2F2, #EEE) repeat-x scroll 0 0 transparent; /* Older Opera Browser Support */
background: linear-gradient(to bottom, #F2F2F2, #EEE) repeat-x scroll 0 0 transparent; /* Standards Compliant */
border: 1px solid #e9e9e9;
-webkit-border-radius: 10px; /* WebKit Browser Support */
-moz-border-radius: 10px; /* Older Mozilla Browsers */
border-radius: 10px; /* Standards Compliant */
-webkit-box-shadow: 1px 1px 0 0 #000; /* WebKit Browser Support */
-moz-box-shadow: 1px 1px 0 0 #000; /* Older Mozilla Browsers */
box-shadow: 1px 1px 0 0 #000; /* Standards Compliant */
padding: 10px 20px;
}
But say we have a small feed on the home page that just needs rsstitles and a small excerpt, it doesn't need the background, box shadow, rounded corners, padding, or border. We can, as of now, use a custom class to override the styling it like this:
.customfeedmanager .rsstitle {
background: none repeat scroll 0 0 transparent; /* Since All Browsers Understand "background: none;" there is no need for prefixes */
border: 0 none;
-webkit-border-radius: 0; /* WebKit Browser Support */
-moz-border-radius: 0; /* Older Mozilla Browsers */
border-radius: 0; /* Standards Compliant */
-webkit-box-shadow: none; /* WebKit Browser Support */
-moz-box-shadow: none; /* Older Mozilla Browsers */
box-shadow: none; /* Standards Compliant */
padding: 0;
}
While this works fine for small changes it's really not good if you have much bigger changes, the CSS can become very messy. I was thinking about this and I came up with the idea of adding a custom prefix to the standard classes of the module in the settings that would allow for cleaner markup.
For example, say for my previous situation of the feed on the home page, we could click settings for the module, and before the "Custom Class" form there would be a "Module Classes Prefix" form that you could place a small prefix (like "hpf" - Home Page Feed) in and then it would render something like this on all of the module's specific classes:
class="hpf-rssfeedmodule"
class="hpf-rssnavright"
class="hpf-rsscenter-rightnav"
class="hpf-rsstitle"
That way the initial style will not apply because the classes are different so the CSS stays cleaner and is easier to style. The prefix wouldn't have to apply to things like the moduletitles or any other mojo base classes, just the module's specific classes. That way the base site styling still applies to our global elements.
If we could implement this with all the modules I believe it would be a very valuable feature.
What do you think?
-Elijah