Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Joel krause
Joel krause
4,116 Points
Posted by Joel krause
Joel krause
4,116 Points

Multiple css selectors and DRY technique

I am trying to convert my projects using the DRY technique and wondering what the best practice is for listing multiple css selectors. Should I list them individually on their own lines or should I just separate with a comma and space and keep listing them inline? Thanks!

2 Answers

Victor Rodriguez
Victor Rodriguez
15,015 Points
Victor Rodriguez
Victor Rodriguez
15,015 Points

put each on it's own line would be the most readable format you can go for. It also makes it easier to see how many elements are being affected by each block. Inline code can get very difficult to read when the name start getting longer as well. example: div > input[type="button"].unique even after 3 or 4 of those that'll get messy.

Kevin Korte
Kevin Korte
28,147 Points
Kevin Korte
Kevin Korte
28,147 Points

I agree with Victor. Putting multiple selectors each on it's own line is easiest for readability. Than compress the final output to strip whitespace and linebreaks for smaller file sizes with something like Sass and a GUI like Prepos or Scout. You don't have to write Sass to get this benefit. You can still write plain CSS but let the compilers minify it for you. Best of both worlds.