My Basic CSS Rules
Posted on July 27, 2010To be honest, I have mixed feelings about CSS. On the one hand, trying to get your website to work in all the available browsers, and perhaps even worrying about cellphones and stuff like that, it gets tricky. People have different screens, people set different fonts as their defaults and otherwise change the way they use the web.
I like to sometimes have a text editor open (emacs) while using a browser at the same time, and at times I really enjoy working in Emacs using w3m to browse - and if the website was done with a layout based in tables, that doesn't work.
I would have to be a crazy man to think that my css is much good, but it is not about the artistry for me, it is about getting certain things to work, about a logic problem. And it is this side of CSS that is fun to me.
So here are some of the things I have learned about CSS over the last two years or so since I started building websites:
- Draw a picture first - Draw the boxes and think about how to do that in CSS.
- Separate Style Sheets - I tried to build See Namibia first with styles in the header. Then you change a bit for one page, do this here, that there, and soon you have no clue what you are doing, updating one thing means changing it throughout your site. Don't try to do it that way - It is mad. I suppose you could use an 'include' to bring it in, but that is just the same thing as having separate style sheets. Why bother. Just do it with external style-sheets and get on with it.
- Get away from 'negative margins' and CSS hacks - There was a time that I thought you can't do a three column layout with CSS, without doing some stupid things. It isn't true. You can build a page with whatever layout you want, with just nested div tags.
- Keep it simple - in a couple different ways. There was a time when I put in every 'margin:0' that I could. When you go back and try to edit it, you have to wade through all this CSS that does nothing to find the one thing that you need to fix. Actually, when your site looks great, go into your CSS file and delete one item at a time and see if anything changes on your site. Do that until you have absolute the least CSS code you can get away with. It is going to save you time in the future, and will make your website that fraction faster - with a smaller CSS file-size to load.
- Organize - madly! Divide up the CSS file as you need to (perhaps say smaller projects, just divide up the classes, regular tags and ids. In bigger projects, divide by page section. Then alphabetize the tags within that section and alphabetize within the actual tag's styling. It sounds like a lot of work, but it isn't - not if you take it over the time that you take to build a site. It takes long the first couple days, but after that it actually starts to save you a massive amount of time.
- Indent - except for the tag line, indent everything else. You can do one long line, which looks less 'smart' but is still really easy to browse, but makes finding the tag easier.
- Build for Firefox - build for the browser that is closest to where the standards are moving. I am not an expert, but I would say build for Gecko browsers, then Webkit (Chrome, Safari) and if you really need, then do the separate CSS files for Internet Explorer. If you can just get away with one style sheet and not have to build and fix, all the better. It may limit the look of your site, but with some creativity you can still make it look good. You can do things like rounding of corners for the browsers that support it, and just not worry about if for the older IE browser.
The most important thing for me is to have a CSS file that I can throw away and build an new one, or change any one thing I want, without having to really dig through things to much. When you add a new app to your website, you should be able to do some simple additions just to get things straight, and you should be able to use dynamic style-sheets to do things like website testing. Then CSS not only becomes a necessary part of building a website, but becomes really fun.
