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.
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?
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.
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.
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.