SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Location
    Northern California
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is this good CSS?

    I'm taking a test next week to see if I'm qualified for a job. The HR person gave me a sample of CSS that they expect me to do. It looks a bit amateurish to me or perhaps over zealous.

    Before I model my CSS skills around the styles below I liked to have a few opinions about the quality of this code.

    Thanks


    /* Global Styles
    ----------------------------------------- */

    html { height: 100%; margin-bottom: 1px; }
    body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, li, ol, dl, dd, dt, address { margin: 0; padding: 0; }
    body { text-align: center; background: #395E7B; font-family: arial, helvetica, sans-serif; font-size: .8em; color: #333; padding-bottom: 20px; }
    ul, li { list-style: none; }
    ul { position: relative; }
    img { border: none; }
    h1, h2, h3, h4, h5, h6 { font-family: "Trebuchet MS", Verdana, sans-serif; }
    p { margin: 1em 0; line-height: 1.4; }
    a { color: #395E7B; }
    a:visited { }
    a:hover { color: #AD1031; text-decoration: none; }

    /* -- Reusable Classes -- */

    #skip { display: none; }
    .shade1 { color: #0094C4; } /* Light Blue */
    .shade2 { color: #AD1031; } /* Red */
    .shade3 { color: #66A455; } /* Green */
    .learn_more { text-align: right; margin-bottom: 0; }
    .learn_more a { font-weight: bold; color: #000; text-decoration: none; padding: 0 0 0 7px; background: url(../images/bullet_learn_more.gif) no-repeat 0 50%; }
    .learn_more a:hover { color: #AD1031; }
    .cross { padding: 0; margin: 1em 0; }
    .cross li { padding: 0 0 10px 10px; background: url(../images/bullet_cross.gif) no-repeat 0 6px; margin-bottom: .2em; }
    .cross li a { color: #0094C4; text-decoration: none; }
    .cross li a:hover { color: #AD1031; }

    .inset_right_bkgd { background: url(../images/bkgd_photo.gif) no-repeat 8px 6px; padding: 10px; float: right; }

    .top { position: relative; text-align: right; margin: 1em 0 3em; border-bottom: 1px solid #CCC; padding-bottom: 5px; }
    .top0 { text-align: right; margin: 1em 0 3em; padding-bottom: 5px; }
    .top a, .top0 a { padding: 0 0 0 13px; background: url(../images/bullet_top.gif) no-repeat 0 50%; color: #999; text-decoration: none; font-size: 85%; }
    .top a:hover, .top a:active,
    .top0 a:hover, .top0 a:active { text-decoration: underline; }

  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,

    There's nothing wrong with that CSS, which parts looked 'amateurish' to you?

    body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, li, ol, dl, dd, dt, address { margin: 0; padding: 0; } ?

    The CSS above makes good use of selectors and shorthand properties and it looks pretty neat to me.

  3. #3
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm curious as to why you would do

    Code:
     body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, li, ol, dl, dd, dt, address { margin: 0; padding: 0; }
    I mean ... why not just

    Code:
    * { margin: 0; padding: 0; }
    since they've put pretty much every element in the book up there?!

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @karinne: because that causes problems with form fields in Opera.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi,

    I think its ok, theres not that much to it really is there? I think some css of the layout of the page ( and the html) would give a better picture of how good coder he/she is. You would get to see how they take advantage of descendant selectors and how lean their code is from that.

    I dont like the way its formatted in to lines like that....it makes it hard to read. Its commented/organized quite well.

    Code:
    body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, li, ol, dl, dd, dt, address { margin: 0; padding: 0; }
    This line either suggests someone who is really not all that css savvy ( in that they dont know about the universal selector) or someone who is very css savvy ( ie: knows that the universal selector causes problems with form fields in opera)
    Last edited by elduderino; Feb 28, 2007 at 11:52. Reason: added some!

  6. #6
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    @karinne: because that causes problems with form fields in Opera.
    Really? Hmmm ... I never had problems with Opera?!? Thanks for replying.

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Opera doesn't support padding for some form controls. If you use
    Code:
    * {margin:0; padding:0}
    you'll have to assign explicit widths to all SELECT elements or the 'down arrow' will obscure the right-hand part of the longest OPTION texts.

    This doesn't make Opera non-standards compliant. The spec doesn't require a user agent to allow any styling of form controls.
    Birnam wood is come to Dunsinane

  8. #8
    Now available in Orange Tijmen's Avatar
    Join Date
    Jul 2004
    Location
    The Netherlands
    Posts
    1,469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Opera doesn't support padding for some form controls. If you use
    Code:
    * {margin:0; padding:0}
    you'll have to assign explicit widths to all SELECT elements or the 'down arrow' will obscure the right-hand part of the longest OPTION texts.

    This doesn't make Opera non-standards compliant. The spec doesn't require a user agent to allow any styling of form controls.
    Hmm i didn't know that, and i do use that line of code very often. I do always check websites in Opera before i put them online, but the last couple of sites didn't have any forms in them. So that explains why i never noticed any problems.

    As long as you don't use any forms on your website, there is nothing against using that line of code?
    Travel Photos on Flickr - Twitter

    “Never give up. Never surrender”

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Probably not, but I've seen some warnings about potential negative performance impact, since the universal selector applies explicitly to every element in the DOM tree.

    You'll then have to set explicit margins and padding on many element types anyway, so I personally prefer to eschew the set-all-to-zero rule and just assign the margins and paddings I want to the appropriate elements.
    Birnam wood is come to Dunsinane

  10. #10
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tijmen View Post
    Hmm i didn't know that, and i do use that line of code very often. I do always check websites in Opera before i put them online, but the last couple of sites didn't have any forms in them. So that explains why i never noticed any problems.
    Ditto here too ... Thanks again Tommy!

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by karinne
    I never had problems with Opera?!? Thanks for replying.
    Its not only opera and I would be more concerned about mozilla/firefox. If you remove the default margin and padding from all elements then you lose the depress effect on submit buttons when clicked.

    Strangely enough you cannot get this effect back even by adding padding and margin directly to the input. It seems once you change the padding/margin then the effect is lost forever.

    I have seen the warnings about negative performance but I have never witnessed this myself or ever seen any demonstration where this has been proved. I expect that it is not an issue at all otherwise there would be many examples proving the point. Its an argument that sounds logical but I doubt that it has any real noticeable effect.

    The global re-set is a good catch all for beginners who don't understand that all elements have varying margins/padding but its just as easy to set them as you go anyway when you know what you are doing

  12. #12
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Opera doesn't support padding for some form controls. If you use
    Code:
    * {margin:0; padding:0}
    you'll have to assign explicit widths to all SELECT elements or the 'down arrow' will obscure the right-hand part of the longest OPTION texts.
    I think it's the other way around, actually. Opera does support padding on <select>, but other browsers don't, which is why this is a problem in Opera but not in other browsers (other browsers are unaffected of the specified padding).

    Although IIRC the same happens in Firefox nowadays.
    Simon Pieters

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I have seen the warnings about negative performance but I have never witnessed this myself or ever seen any demonstration where this has been proved.
    I think it would only be noticeable for a big document with many thousands of element nodes (if at all).

    Quote Originally Posted by zcorpan View Post
    I think it's the other way around, actually. Opera does support padding on <select>, but other browsers don't, which is why this is a problem in Opera but not in other browsers (other browsers are unaffected of the specified padding).
    I've never managed to set padding on form controls (including SELECT) in Opera. You can remove it with the universal selector, but you cannot restore it with padding.
    Birnam wood is come to Dunsinane

  14. #14
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    I've never managed to set padding on form controls (including SELECT) in Opera. You can remove it with the universal selector, but you cannot restore it with padding.
    Works for me... (except for <button>).
    Simon Pieters

  15. #15
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't tested this in the latest releases, so maybe it's been fixed?
    Birnam wood is come to Dunsinane


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
  •