SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    St. Louis, MO
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Appeal to CSS experts

    I've used css for years, albeit for very basic things. I now am leaping into the 21st century and want to begin designing/coding web layouts with it in conjunction with xhtml, xml...

    My question is, what general do's and don't does an experienced css designer adhere to when beginning any project? Starting from the bare basics and continually drilling down to things more specific.

    I'm not asking for the details of the 'specific' things but a general guideline to designing the most compatible, efficient code as possible (don't laugh).

    The reason I'm putting it this way is because I've come across tutorials on slicing up a photoshop layout and saving it with css rather than standard html. I did it with an existing layout I had and it looked great but there were a ton of people who commented on how the code was 'ghastly' and can potentially blow up under some circumstances but they never said why.

    I took some of the glib responses and googled the sh!t out of css tutorials and more or less just get references with examples but no real meat and potatoes fundamentals on the whole concept of design.

    Thanks

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    I think you'll probably get a consistent starting recommendation here: Semantic markup.

    Use the correct markup to describe the content.
    Use headings(h1, h2, h3 etc..) lists(ul li, dl dt dd, ol li etc..) paragraphs..
    Then look at the design you have in mind and see how you can achieve it with the elements you have - and add extra markup like divs only where you need to group some markup to style it - say you want a border around some group of elements..

    If you have a layout in mind - chances are that someone has already created a solid example that you can use already so have a look around for the layout you are trying to achieve.

    Keep your markup and CSS as simple as possible.

    The FAQ has a '10 best practices with CSS' section that is a good summary

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I'm not asking for the details of the 'specific' things but a general guideline to designing the most compatible, efficient code as possible (don't laugh).
    1) keep it simple

    2) Don't use hacks unless its a known and documented bug

    3) Take care of margins and padding on all elements the use.

    4) Avoid using too much absolute positioning but use mostly static positioning, margins and floats to maintain the flow of the layout. If you use absolute positioning then make sure the element does not interfere with the rest of the layout and isn't part of the general flow that needs to be maintained.

    5) Avoid divitus : Use semantic html. i.e. Use the correct html element for the task in hand and don't just use divs. Divs are generic dividers of page content and nothing else. 99% of the time there will be an html tag perfect for the job in hand e.g. p,h1,h3, ul,ol,dl etc. Use divs to divide the page into logical sections only.

    6) Avoid Classitus: Don't overuse classes or id's. If your page is logically divided then you can target many specific elements without the need for millions of classes.(e.g. #header h1 a{color:red}).

    Remember that id's are unique and can only be used once per page.

    7)Use valid css and valid html so visit the validator at every opportunity especially when learning something new.

    8)Rationalise your code at every stage and ask yourself whether you need that extra div wrapper or not. Can existing elements be utilised for background images without adding extraneous code.

    9) Allow flexibility for text resizing issues and don't make everything a fixed height. Use ems (or percent) to allow the layout to expand and code with this in mind.

    10) Validate again.

  4. #4
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    St. Louis, MO
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent... thank you. Exactly what I wanted.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •