SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how do you group style rules

    Could anybody explain how is a good way to group css style rules please.

    I will give some examples:

    1.
    HTML Code:
    h1{
    font-size:14px;
    color:blue;
    }
    h2{
    font-size:14px;
    color:green;
    }
    Both have the same font-size. Should I put extra h1,h2 rule and put there font-size?

    2.
    I use 2 different color rules for anchor texts. Should I create extra class only for color?
    HTML Code:
    <a class="index colorA" ...
    colorA{
    font-color:green;
    }
    3.
    I have on different pages different side bars. Sidebar 1 is on index and sidebar 2 on other pages. Both have in common their width and background color, but have also 3 different rules. Should I create extra class for width and background color?

    It would be really helpful if you can give some your examples what you group and what not.

    Thank you!

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,195
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    In my personal experience i prefer to stack rules together if they share common properties, stacking them together will decrease the amount of time it takes to load the page because it means the browser has less CSS to parse and will improve the time it takes to update the rules. Below is an example of your example...

    Code CSS:
    h1, h2 { font-size: 14px; }
    h1 { color: blue; }
    h2 { color: green; }
     
     
    .index, .other {
        background-color: grey;
        width: 200px;
    }
     
    .index { /* More CSS properties here */ }
    .other { /* More CSS properties here */ }

  3. #3
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But the problem could be that you need to change html in order to change particular font-size or background-color if you choose that way. That is the reason why I am confused about how to group rules.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,195
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Grouping rules together will make it easier to update rules, if you ever needed to update or add a new rule then all you would need to do is group the new rule with the current ones and add the correct properties to it.

    Inheritance isn't an evil thing in CSS and HTML, it will be the best thing you will ever use while developing with CSS and HTML.


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
  •