SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot yukimushu's Avatar
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best practise when using selector?

    When it comes to CSS; im mega anal about clean, efficient code - so im wondering whether you guys can help me set something straight; which is a better way to use a selector?

    For example; say I had the following xhtml:

    Code HTML4Strict:
    <div id="leftcol">
     <ul>
       <li><a href="example1.html">Link 1</a></li>
       <li><a href="example2.html">Link 2</a></li>
     </ul>
     
    <more html here but no more anchor links>
     
    </div>

    Which is the best practise to refer to the anchors within the list?

    Would it be:

    Code CSS:
    div#leftcol ul li a {
     
    }

    or

    Code CSS:
    div#leftcol a {
     
    }

    ?

    Thanks in advance

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think you answered the question yourself.

    Which is the best practise to refer to the anchors within the list?
    If you say:

    #leftcol a{etc..}

    Then you will be targeting all the anchors in that section and not just the ones in the list. If that's what you want then it's fine but your question said "target anchors within the list".

    Therefore you would need to say:

    #leftcol li a{etc...}

    (There is no need to prefix it with the div or add the ul either.)

    It all depends on whether or not you want to target all the anchors in #leftcol.

    You should remove the div from the front of #leftcol asI mentioned above because that's just overkill and a waste of bytes.

    Remember though that whatever method you use you will have to be consistent so that you maintain similar specificity.

  3. #3
    SitePoint Zealot yukimushu's Avatar
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    I think you answered the question yourself.



    If you say:

    #leftcol a{etc..}

    Then you will be targeting all the anchors in that section and not just the ones in the list. If that's what you want then it's fine but your question said "target anchors within the list".

    Therefore you would need to say:

    #leftcol li a{etc...}

    (There is no need to prefix it with the div or add the ul either.)

    It all depends on whether or not you want to target all the anchors in #leftcol.

    You should remove the div from the front of #leftcol asI mentioned above because that's just overkill and a waste of bytes.

    Remember though that whatever method you use you will have to be consistent so that you maintain similar specificity.
    Oh ok, cool - I know #leftcol ul li a { and #leftcol li a { would do the same thing; I just wondered whether referring to the anchor through the route of the hierarchy was better practise; but if it really doesn't matter then ill just strip the unnecessary tags and save a few bytes of code

    Cheers!

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's only better practice if you want all your links styled the same regardless of whether they're contained within different elements. If you have leftcol links in list items and in paragraphs and they need to be different then you need the extra specificity.

  5. #5
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but if not, I would stick with
    Code CSS:
    div#leftcol a {}
    "Every anchor inside #leftcol". As long as this works practically for you and you don't plan using anchors inside #leftcol outside your list.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I just wondered whether referring to the anchor through the route of the hierarchy was better practise;
    Every time you add a selector you add weight to the style and when you want to change the style you have to follow the same route. There is no need to add anything that isn't needed as long as the style is as specific as it needs to be. Addressing an element via its parent id is good practice if it saves adding unnecessary classes.

    It is certainly not good practice to add a div to the start of every selector (e.g.div#leftcol) because divs are ubiquitous and it aids little comprehension by doing this. However it does help to identify other elements so that when you see ul#nav in the stylesheet you know that you are dealing with a ul and have to suppress the margins/padding and list bullet etc. If you just saw #nav then you would have to refer back to the html to check what element it was before you could check whether the correct choices had been made.

    In the end though it does boil down to a matter of choice and consistency.


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
  •