Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2010
    Location
    London, UK
    Posts
    40
    Thanks
    1
    Thanked 4 Times in 4 Posts

    CSS Reset Styles

    Guys,

    I was reading the following article on global css reset styles, but how do you know which is the best method to use?

    A Killer Collection of Global CSS Reset Styles

    For example, some say using the asterisks (*) should be avoided, others say its the best method for cross browser resets.

    Is it best practice to pick the resets you feel most comfortable working with and then stick to them for every project you do?

    I have always used the following resets:

    Code:
    body {
     line-height:1;
     font-size:62.5%;
     font-family: Avenir, Verdana, Arial, Helvetica, sans-serif;
     text-align:left;
    }
    ul,li,ol,h1,h2,h3,h4,h5,h6,pre,form,html,p,body,blockquote,fieldset,input {
     margin:0;
     padding:0;
    }
    h1,h2,h3,h4,h5,h6,pre,code {
     font-size:1em;
    }
    ol, ul {
     list-style:none;
    }
    li a:active, li a:focus, a:active, a:focus {
     outline:0;
     border:0;
    }
    table {
     border-collapse: collapse;
     border-spacing: 0;
     border-style:none;
     clear:both;
    }
    td {
     vertical-align:top;
    }
    form, fieldset {
     border:none;
    }
    a {
     text-decoration:none;
    }
    a img {
     border-width:0;
     border-style:none;
    }
    Never had an issue but not sure if this is something that can be improved or if there is a normal set of resets people tend to use?

    Cheers

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,743
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello digitalclubb,
    I've stopped using resets entirely and instead address each issue as it arrises.
    Using a global reset is like trimming a hangnail with a 12ga shotgun, the hangnail is gone but so is the finger.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Nov 2010
    Location
    London, UK
    Posts
    40
    Thanks
    1
    Thanked 4 Times in 4 Posts
    haha interesting philosophy..

    However, would you not find that you would always tend to find the same issues arise with every project, thus forcing you to write the same css each time and ultimately creating reset styles?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,743
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quite the opposite in fact.
    Many times when using *{margin:0;padding:0;} I end up specifying a margin or padding multiple times to re-establish a needed space.
    Without the reset, I simply put add margin:0; in the one place I really want no margin.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I agree with Excavator somewhat. But, starting with a global setting for margins and paddings gives what I like to call a clean slate. I've found many times some elements display differently in different browsers simply because there might be a default padding or margin.

    I think its a matter of preference and what you get used to. I dont see any downside to using a global setting.


  •  

    Tags for this Thread

    Posting Permissions

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