CSS Best Practice

Status
Not open for further replies.
H

HairyHun

Masturbating Bandit
Oct 11, 2007
576
2
0
I have been coding with tables for many many years. I liked how easy and fast it was to create stuff. We all know how heavy and messy the code can get.

Over the last year I dabbled in tabless and now I am convert. I have to think a little harder in the beginning bu then it's beautiful to see the site come to live and have a well oxygenated code.

Now I am wondering about how is the best way to organize the hierarchy of the IDs and Classes.
if I don't plan ahead, instead of having a mess with tables, i will have a mess within the CSS code.

I mean with the tables, it was very straight forward, you plan for what you need right away. Adding a column or a row was very easy. But now with divs and the sort, you need to kind of plan ahead and leave space for future evolution.

So for all you CSS gurus, where are some questions:

- What kind of pre-planning do you do before jumping in? Any special rituals that cannot do without?

- How many physical files do you split the CSS code into? According to what logic?

- Do you nest IDs and classes? How much and when?

- How do you plan for the future? Do you leave empty divs in places where you might need to have an extra design element? Specifically I am thinking of a series of templates with small structural differences. Would you run that from the same css files ( have the all the possibles elements built in, then disable enable the ones you need )

- When is it ok to use tables? ( i take it tabulated data is still ok, but with the parameters in the CSS )
I have been using tables to get Blocks to be inline. Tables are stripped of all parameters though.

Any other advice, tips, resources you could suggest?
 


I know Audax is a pro, but I do actually disagree. In my experience, going deep with the hand-written CSS/XHTML is the best way to get optimal results.

1. Pre-planning: My pre-planning is a photoshop file, and then a content-only HTML file with no styling or layout whatsoever. Then I add classes and IDs, and containers where necessary - then CSS.

2. Depends on the purpose of a site. If it's a hit-and-run lander, I just embed it in the HTML file to reduce the number of requests to the server. If it's a content site, I make a CSS file for the skeleton of the site, then a CSS file for each specific content type (articles, tutorials, whatever)

3. I use classes for everything that will be used more than once, and IDs for unique objects. I use child selectors whenever possible instead of IDs, makes it easier to change stuff later. (div#main p a { } for instance)

It has a few nasty clearing hacks in it, but check out www . blitware . com for an example.

4. Usually I have a content area that can accomodate new elements (another button, a screenshot, what have you) with little effort. Anything beyond that probably gets a new layout. You can always put it in a new CSS file - doesn't really matter :)

5. It's only okay to use tables for tabulated data. Using them for layout will always, always get you in to trouble. You'll thank yourself later, trust me.

As far as resources go - try making a Zen Garden ( css Zen Garden: The Beauty in CSS Design ) and read A List Apart ( A List Apart: A List Apart ). Run VMs or something so you can always be testing in IE6, IE7, and IE8 as well as the latest version of Firefox (and Chrome and Safari depending on your market)

As far as tips go: Just keep at it, absolutely. There are so many benefits. One of the largest is better SEO for your site. Try turning off your stylesheet. Your site should look like a nice Word document if you do - and that's how Google sees it. Also, it's supposed to be fun :)
 
HairyHun said:
- What kind of pre-planning do you do before jumping in? Any special rituals that cannot do without?
Click to expand...
* {outline: 0px; border: 0px}
Reset the body margins to 0px and adjust the body line-height to 18px

HairyHun said:
- How many physical files do you split the CSS code into? According to what logic?
Click to expand...
If you can keep the file under 30kb after gzipping then merge everything together to limit server requests.

HairyHun said:
- Do you nest IDs and classes? How much and when?
Click to expand...
Depends on your layout and number of different pages on the site. I'll nest if I need to customize spans within a specific div or something of that nature.

HairyHun said:
- How do you plan for the future? Do you leave empty divs in places where you might need to have an extra design element? Specifically I am thinking of a series of templates with small structural differences. Would you run that from the same css files ( have the all the possibles elements built in, then disable enable the ones you need )
Click to expand...
Not sure what you mean, but after coding CSS for 3 years it's so quick and easy to create any kind of layout that temlates are pointless.

HairyHun said:
- When is it ok to use tables? ( i take it tabulated data is still ok, but with the parameters in the CSS )
I have been using tables to get Blocks to be inline. Tables are stripped of all parameters though.
Click to expand...
Abso fucking lutely. Tables are essential if you need to display numbers or data. Find the right balance - CSS for the layout, tables for data sets. Don't let anyone tell you tables are obsolete, just don't overuse them.

HairyHun said:
Any other advice, tips, resources you could suggest?
Click to expand...
CSS frameworks are bloated. CSS in itself is not a deep "language", there's just no need for frameworks.

PS: JQuery for JavaScript - best framework out there.
 
  • Like
Reactions: omgyams
Whenever I start an xhtml slice job, I pretty much do the following

Clear my margins and paddings via html * , since its the margins and paddings that typically cause the most cross-browser issues, especially to elements with it unset.

Create two containers, usually #_container and #container, one is 100%, and the one within will be a fixed with with margin set to 0 auto. I learned a long time ago, IE works best when you try to center an object in an already 100% width block level element.

then depending on the design I decide from there. CSS frameworks seem to be too much bloat in my opinion, when just knowing some common block-level practices goes a long way. Javascript frameworks on the other hand are very handy such as jquery or prototype, since unlike CSS there're not as many ways to do something cross-browser without conditionals.

I typically make a single external style.css, and I avoid trying to nesting too many things (few things suck worse than trying to fix a IE layout issue and your headers are 6 divs deep). In short, K.I.S.S. applies most of the time.
 
Lots of good stuff guys! Thanks!

For the nesting, this is what I meant!

Let's say there is the header element, which is unique. in whith there is the menu element, which is unique too. Whithin which there is a class which is not unique

Would you do #header #menu .class?

Or just #menu .class ?

Would it be ok if there was a .class of the same name in a completely different ID like, #footer?

I thought that if I nested, then when I get to coding, when I select the class, only a shortlist of relevant class names will appear. Making it faster and easier to work. But it seems that classes from other completely separate IDs also appear.

I was affraid that styles assigned to one object might affect other objects.

However, now i see that repeating that long line of names might bloat the css file.

HH
 
In order to use top-level ids and keep the nested children class/id free, I sometimes give the body element an id specific to the page.

To dynamically pull the page filename, you can use this:

function currentpage() {
$page = substr($_SERVER['SCRIPT_NAME'],strrpos($_SERVER['SCRIPT_NAME'],'/')+1);
list($output, $ext) = explode('.', $page);
echo $output;
}
Click to expand...

And then you'd write something like

<body id="<?php currentpage(); ?>">
Click to expand...

This will give you e.g. a body id of "index" for the homepage, etc.
 
megalomaniac said:
t has a few nasty clearing hacks in it, but check out www . blitware . com for an example.
Click to expand...


I went to check out blitware, and all they offer is a driver utility and a system repair utility. Is that the site you had in mind?


Tx
HH
 
Here are few questions I ask myself often.

- What is the best way for a image hover button? I create a class: a block, set the background and size and I move the background to top or bottom to change the state ( hover effect, etc ). Then I apply this class to a link

The problem with this is that when I try to have in inline with text or other buttons. It skips to a new line. If I put it something other then block, then the it looses its shape. I used to create a table ( no size parameter or anything, just to hold things in line). I have a feeling this might be a relic from my table-driven days. :)

- I created a set of css classes that are commong. ALl the form pages accross the site. If I have a table only on one of the pages. Would you set the sizes on the HTML or still use css? You keep a separate css file for specific things that don't turn up often?

- Often used styles: Bold and the likes. Let's say I use a bold or a bold with a certain color often as table titles, etc. Right now I set an unused tag (ie. h3 or h4) so that I can easily use it when I work ( By easy, I mean to set a header tag, it's Command-3 on the keyboard ). It's very practical but is there a side effect I have not yet realised? Is this cutting corners too much?


Thanks
HH
 
Status
Not open for further replies.
Top Bottom