SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Viewing the dom tree

    Do you have any suggestions for apps that actually show you the entire dom tree for your web page?

    Or any apps that help you detect unused css in your stylesheet?

    Cause i'm trying to minimize my css on my stylesheets as i feel its getting way too long.

    Any suggestions.

    Basically, i'm trying to figure out with this dom tree is see clearly when i should i use descendant selectors, sibling selectors, adjacent sibling selectors , child selectors or whatever other selectors.

    I'm trying to make my code more efficient and minimize on extra html.

    And also make my stylesheets clear and manageable.

    Currently, i feel like my styles are all over the place.

    Should i separate my code into a layout stylesheet and a text formatting style sheet, so that there's less confusion?

    /* text formatting section */

    /* layout formatting section */

    something like that?

    Any tips from the pros here would be welcomed.

    From what i read so far, using ids is really not good practice.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by wc43870n View Post
    Do you have any suggestions for apps that actually show you the entire dom tree for your web page?
    Hehe, your browser. The dev tools for most browsers give you a nice view of the DOM tree. Inspect element in, say, Chrome, and you can see nicely what the browser sees under the hood.

    Or any apps that help you detect unused css in your stylesheet?
    Check out Dust Me Selectors.

    Should i separate my code into a layout stylesheet and a text formatting style sheet, so that there's less confusion?
    It's up to you, but I prefer to have everything in one style sheet. It's easier to go straight to a style and change it that way, and you get fewer server requests etc.

    From what i read so far, using ids is really not good practice.
    There is a trend away from them, as classes are more flexible and reusable. But IDs still have their place.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    yes, the browser does have some dom info and is helpful, but what i wanted was actually more of a chart like this:

    http://www.webstepbook.com/supplemen...s/dom_tree.gif

    know any tools that do that?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by wc43870n View Post
    know any tools that do that?
    Not off the top of my head. I don't really see what use it would be, TBH. Seems easier to use the web inspector to me.

    i'm trying to figure out with this dom tree is see clearly when i should i use descendant selectors, sibling selectors, adjacent sibling selectors , child selectors or whatever other selectors.
    In practice, it's pretty easy to see which is needed. The inspectors make it quite obvious which elements are one the same level (siblings), children and so on.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •