Latest on twitter:
That's life
Bits of my personal and working life.
HTML and CSS isn’t new but there are still so many people out there that mis-understand it. So I’ve come up with my own list of tips to help develop more robust and flexible pages.
All browsers have their own defaults for paddings, margins and all sorts of settings which can make your life harder. So level the playing field by using a reset stylesheet to bring them all as close to each other as possible before you even start. Just Google around to find the one you want to use.
I won’t go into this too much as it should be obvious, it basically means that you should use HTML as it was suppose to be used e.g. use a table for tabular data, fieldsets to group logical form fields, a label to describe a field’s purpose (Read up on it, you may not know as much as you think.)
Adding HTML to the page so that it is easier to style it is a no no! e.g. adding an empty item in a list or empty paragraphs. Not only is the added HTML irrelevant and useless but you are making more work for yourself. Why? Because you have just tied your stylesheet directly to your HTML, if you want to change your styles then it’s likely you will have to change that HTML too. CSS was created to be separate from HTML so that’s how you should use it.
I see so much unnecessary CSS in stylesheets because a developer doesn’t understand that a div will fill up the full width of its parent or that a standard hyperlink can’t have padding unless it is set to a block. Have a read of this article (which I just found) which does a good job of explaining how blocks and inline elements work. Also check this bad boy which may clear a few things up what can or can’t be which type of display setting.
Floats are great but often over used, this goes the same for widths. Try to think of ways to styling the page without using either. There is a good reason for limiting the use of these, for floats it simply limits the number of issues you will have because lots of bugs often relate to floats whether that is an un-cleared item within it or even numorous bugs found within in IE6 (which is still going to be here for a year or two trust me!) As far as widths are concerned you can often let elements fill out the parent container, it’s a natural thing to do so let it do it. The bonus side effect is that the fewer widths you have the easier it is to update a site when it changes dimensions as everything just fills to the parent’s new size.
If you view your page without any styles it should be easy to read and in logical order. e.g. main navigation near the top, content and then any sub-content and navigation. Don’t organise it around your styling, this is the wrong way to think about it. If you really MUST move HTML somewhere different for styling purposes then do it with JavaScript afterwards as an enhancement not a requirement.
Hope the above helps.
