SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    elements in sync with html structure?

    Hello,

    I've seen many designers do that:


    Code:
    #main #content #entry h1.title {}
    #main #aside #nav-items {}
    It seems the purpose is to keep in mind what is the html tree. Is it a good practice? Is it just a question of personal pref? How do you do you declare your elements?

    Regards,

    -jj.

  2. #2
    SitePoint Enthusiast PiontekMedia's Avatar
    Join Date
    May 2011
    Location
    Vermont
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If multiple classes or ids have the same values, such as background: #fff, then it reduces the CSS file size by declaring it once instead of in every single class that needs a white background.

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Is it a good practice?
    No, it's just a fun way to waste browser resources. And slow it down (not that you'd notice).

    #main #content #entry h1.title {}

    should be equivalent to
    h1 {}
    (why would you have more than one h1?)

    But let's say for some reason you have many h1's but just one has the class of "title"

    .title{}

    or what if other elements also have that class

    h1.title{}

    I think a class on the h1 is silly. So you could
    #entry h1 {}

    Similarly
    #main #aside #nav-items {}
    === #nav-items {}

    The first one is just wasting code, time, money, energy, and collapsing the space-time continuum. Remember that CSS gets read right to left, not left to right. For some bizarro reason.


    If multiple classes or ids have the same values, such as background: #fff, then it reduces the CSS file size by declaring it once instead of in every single class that needs a white background.
    JJ's code doesn't have commas.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,815
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Perhaps the provided example was just a bad one.
    I have used multiple IDs, when I have found that I needed added specificity. I cant think of a good example at the moment but let me struggle through with this one, maybe you'll get what I mean. Lets assume that you have something like:

    <div id="stuff>
    <div class="box"><p></p></div>
    <div id="cont"><div class="box"><p></p></div><div class="box"><p></p></div></div>
    <div class="box"><p></p></div>
    <div class="box"><p></p></div>
    <div class="box"><p></p></div>
    </div>

    #stuff .box p {}
    #cont .box p {}

    the rules will conflict with each other.. as I loathe to use ! important, I could get the result I want any of the following ways...

    #cont #stuff .box p {}
    #cont div.box p {}
    #cont #stuff div.box p {}

    yeah, some folks go overboard with this sometimes, but....

    also, Stomme brought up a point about h1... since the html4 logic is that there is supposed to be only one h1. so essentially an h1 CAN be thought of an ID in an of itself... EXCEPT that does require good html4 discipline OR not beign worried about converting to HTML5 at some point, which does allow for multiple h1s.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I posted this the other day but its still funny

    More info in this thread and from Steve Souders.


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
  •