rethinking css
Posted: Tue Apr 12, 2005 4:34 am
Hi all
I've been messing around with CMS made simple for a week or so, and it seems like it'll do what I need (or at least it will when I sort out getting the News module to work - which it doesn't at the moment, I'll put a post in one of the 'help' forums about this)
I'm not a coder, but have a pretty good understanding of HTML and CSS. I'd like to make two suggestions regarding the general approach to CSS in CMS made simple. At present the CSS suffers from what I call 'class overproduction' - it's really easy to keep knocking out new classes, the trouble is that a. it makes it hard to code - you have to keep going back to the stylesheet, and b. the pages have no logical structure if you view them in a user agent which doesn't support CSS. The best way to see this is to user the indispensable 'Web Developer' extension in Firefox, which has a 'turn off CSS' function. If all your styling is by It also means your HTML is riddled with classes.
First, I'd suggest that a much better approach is to give your content types ids: id="maincontent", id="mainnav" id="banner" etc, and then use plain HTML markup (h1 h2 p ul etc etc) within those elements. Then write your stylesheet to target the HTML elements within their parent elements: #maincontent h1, #header ul etc
Done this way it's surprising how little CSS actually ends up in the HTML code, which makes the actual content really easy to read.
It also means that you can join the chorus of smug, know it all CSS-heads in their 'keep content and presentation separate" mantra!
As an example, the Calender module has a class applied to every table cell, using the decendant selector method the table could be wrapped in a div or be given one class (depending on whether there was associated which would allow styling of each element type within the table. This can cut your HTML code size in half.
Second, and I'll admit it took me about a year to work this out, don't use breaks! - use elements with the appropriate display type. In CSS there are two broad categories of elements - block, which have implicite line breaks (p, h, ul, div etc) and inline, which are, er, inline (span, em, strong etc). If you find yourself using span followed by a break you are effectively saying 'this bit is supposed to wrap onto the next line if necessary', followed by 'put a line break here'. Better to use a div in the first place, or better still an HTML element like h3.
I've been messing around with CMS made simple for a week or so, and it seems like it'll do what I need (or at least it will when I sort out getting the News module to work - which it doesn't at the moment, I'll put a post in one of the 'help' forums about this)
I'm not a coder, but have a pretty good understanding of HTML and CSS. I'd like to make two suggestions regarding the general approach to CSS in CMS made simple. At present the CSS suffers from what I call 'class overproduction' - it's really easy to keep knocking out new classes, the trouble is that a. it makes it hard to code - you have to keep going back to the stylesheet, and b. the pages have no logical structure if you view them in a user agent which doesn't support CSS. The best way to see this is to user the indispensable 'Web Developer' extension in Firefox, which has a 'turn off CSS' function. If all your styling is by It also means your HTML is riddled with classes.
First, I'd suggest that a much better approach is to give your content types ids: id="maincontent", id="mainnav" id="banner" etc, and then use plain HTML markup (h1 h2 p ul etc etc) within those elements. Then write your stylesheet to target the HTML elements within their parent elements: #maincontent h1, #header ul etc
Done this way it's surprising how little CSS actually ends up in the HTML code, which makes the actual content really easy to read.
It also means that you can join the chorus of smug, know it all CSS-heads in their 'keep content and presentation separate" mantra!
As an example, the Calender module has a class applied to every table cell, using the decendant selector method the table could be wrapped in a div or be given one class (depending on whether there was associated which would allow styling of each element type within the table. This can cut your HTML code size in half.
Second, and I'll admit it took me about a year to work this out, don't use breaks! - use elements with the appropriate display type. In CSS there are two broad categories of elements - block, which have implicite line breaks (p, h, ul, div etc) and inline, which are, er, inline (span, em, strong etc). If you find yourself using span followed by a break you are effectively saying 'this bit is supposed to wrap onto the next line if necessary', followed by 'put a line break here'. Better to use a div in the first place, or better still an HTML element like h3.