How to write cleaner CSS?

[Aeonix]

At the end of the day, I end up in:

menu div#memberArea div#dropdown-trigger div#dropdown-content div#form div#authSubmitButtons input#authRegisterButton.

And now many people recommend shortening it down, sure! But as soon as I drop out elements I don't feel like the code explains itself as good. This very long nasty string, as bad as it is, still explains very well it's purpose without comments. Deleting a part of it may make it way harder to the point where you ask yourself "Why do I try to explain it, if it's name should explain itself, but it makes it harder?" or "Why not make it two-depth long, if I'm shortening it anyways?".

Could anybody explain me how they manage their CSS code? Because this gets really depressing when you have 12-depth long selector.

P.S.: Yes, I have been through Google and it's links. None of mentioned "improvements" are for my problem. Nobody mentioned super long selectors.

[gentlemedia]

You're getting way too specific with long selector chains like that which makes it imo harder to read and it will give you in the end specificity issues - https://css-tricks.com/specifics-on-css-specificity/
Also using ID's in your CSS is not recommended for specificity reasons too and the CSS applied to it is not reusable.

Look into BEM or SMACS methodologies for reusable components and proper naming conventions.
http://getbem.com/
https://smacss.com

[Dani]

I didn't read the link, but I definitely agree that using IDs severely limits reusability, and therefore unnecessarily bulks up the size of the CSS file.

Bem works. Only if you.ve structured your css thus though. If you do mix and match from snippets and third party stuff you can end up in css spaghetti hell.