Css

Jimmy Changa's picture

They have: 220 posts

Joined: Mar 2003

Since you "guys" seem to be very CSS oriented, I'm sure you know where I could get some tips on making my CSS more usable and organized. All the CSS tutorials that I find seem to teach how to use CSS but not how to use it WELL. I want to know how to use it WELL.

I hope I make sense. Smiling

Busy's picture

He has: 6,151 posts

Joined: May 2001

Take a look in this thread by necrotic, lists a few favorite sites from people

Using it well can just mean having it work across the browser range without hacks. Some sites try push advanced CSS which isn't even supported by all so use your judgement as you'll soon find what does and doesn't work properly.
good luck

Jimmy Changa's picture

They have: 220 posts

Joined: Mar 2003

Those look like some good reading, but I'm looking more for an actual implementation tutorial type thing, not just a list of the available commands.

There are several ways to skin a cat...which is the best?

Now I'm thinking that I DON'T make sense. Smiling

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

css-discuss.org is an excellent mailing list. The problem is, there are so many pieces to good CSS...

The most important is sensible and practical markup (preferably semantic). So html and xhtml is really more important than the CSS in many ways.

I prefer to use contextual CSS as opposed to classes, so my html has many ids in it, and not many classes.

Then instead of setting classes for various elements, I can say, all in will be blue.

#thisone p { color: blue; }

Without having to put a class in every flipping in the div. This isn't a big deal in small pages, but really makes a difference on others.

Other than contextual css, I try to use short-forms for things:

margin: 0 0 15px 0;

instead of:

margin-top: 0;
margin-right: 0;
margin-bottom: 15px;
margin-left: 0;

Otherwise, there are little pieces like good practice coding (indent, spaces between, all lower case, logical grouping, comments where necessary, history log.)

Also (yikes!) there are many ways to achieve the same end result, but that hinges on the html/xhtml that is being styled, so there is no way to definitively say THIS IS BEST.

If you have more specific questions, I'd be happy to answer them. Smiling

dk01's picture

He has: 516 posts

Joined: Mar 2002

I have to say that when I started doing css I was looking for that one definitive site that could show me EXACTLY how to do it all. I never found it! The only way to really do it was to sit down for about 3 weeks and pick apart css sites that have already been designed. Call it cheating but all I wanted to know was how it all works. And basically picking apart sites will teach you that. After that you will have some of your own knowledge. Not from one two or three sources but from many sources.

As always I would suggest testing css in as many different environments and browser. You will find that sometimes there are tradeoffs and that you may not be able to control ever single pixel, but that it what css design is about! Fluidity!

Sorry if this isnt the most helpful message but I wish someone would have helped me to discover this earlier so that the first item in my AutoComplete on yahoo wouldnt have been "css tutorials" for about a year.
-dk

Jimmy Changa's picture

They have: 220 posts

Joined: Mar 2003

The reason I'm asking this is because I am working on my redesign of TortillaBoy.com which already uses CSS but is currently very sloppy because I just added things as I went...still adding actually.

Now, as I just typed out that previous paragraph, it became apparent to me. If my site design was better planned, my CSS would invariably be more organized.

As far as XHTML goes, I plan on trying to design in the strict XHTML format. Of the links in that other thread, I am finding the W3school's tutorials on both CSS and XHTML the most helpful. I think I'll probably have a few questions once I get into the actual coding though. I used classes for everything on my current design, and now see the benefit of the "id"s...I just need to learn the tricks to using them.

Thanks y'all, for your input. Smiling

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

One thing is to be careful about nesting elements (classes and IDs) -- if you use relative font-sizing (ems or %) it can get awfully messed up awfully quickly. Using keywords is fraught with issues, but is sometimes the only option if IE/Win needs to resize the text (daft browser is the ONLY current browser that can't resize).

I tend to err on the side of caution, and leave the font sizes a comfortable reading size.

Good luck with your redesign and learning curve. Smiling

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

One thing I think about when I code CSS is "Will I be using 'this' more than once?"

If the answer is yes, then I put it in a class.
If the answer is no, then I put it in an ID.

That may or may not have helped much...

But the way I see it is this, you can only get good at CSS if you use it often, make mistakes often and learn from them, so the next time round you (hopefully) won't make the same mistake.

It also helps, as mentioned, to look at other people CSS coding, look at how they layed it out, how it's all organised and stuff.

Happy CSS coding Laughing out loud

Jimmy Changa's picture

They have: 220 posts

Joined: Mar 2003

Maybe y'all are rubbing off on me a little...I'm going to have to look into this CSS-P now.

...as if I don't already have enough on my plate. Smiling

Jimmy Changa's picture

They have: 220 posts

Joined: Mar 2003

Hey, lookie at me...I'm doing CSS-P!!

TB-Designs.com vol4 (WIP)

Only the "About" page has anything on it yet. Smiling

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

Look at you go! Congratulations. Smiling

Jimmy Changa's picture

They have: 220 posts

Joined: Mar 2003

Thanks for the encouragement...now if I can only do something INTERESTING with it...lol

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.