Hacker News new | ask | show | jobs
by stoph 5399 days ago
I do a lot of near-pixel-for-pixel reproduction from Photoshop documents, and I find that using rule nesting, mixins and child selectors (a similar style to the final example from the article, the first example is atrocious) definitely helps me build more semantic HTML.

Here is a quick cut-and-paste from a LESS stylesheet:

https://gist.github.com/1212027

There are a lot of random items and I find it easier not to cascade styles as much as some recommend. I try to consolidate styles into generic classes or mixins as I find opportunities to re-use them. I try not to use the child selector unnecessarily (the article uses it a totally unnecessary amount) because I often need to add unsemantic wrapper elements to achieve the right effect.

1 comments

The examples in the article are simplifications for the purpose of illustrating the points. We'd almost never use nesting to any element all the way back to the HTML or BODY laments. But when you have elements like SECTION, ARTICLE, LI, DIV, etc which can be nested infinitely in HTML judicious use of the child selector is a godsend.

The examples in your gist would not benefit from additional use of child selectors, but I'll bet they'd appreciate it if the parent elements did :)