Estructurar el CSS correctamente siempre ha sido un pequeño reto para los desarrolladores, muchas veces se han preguntado como estructurarlo de manera correcta, de forma que con un simple vistazo podamos encontrar lo que queramos.
Un herramienta realmente útil para realizar esto es CSS Frame, en él, incluimos nuestro código HTML y automáticamente nos generará el CSS estructurado en forma de árbol, es decir de menos a más.
#root { }
#top { }
#logo { }
#logo a { }
#search { }
#search fieldset { }
#search fieldset label { }
#query { }
#search fieldset button { }
#header { }
#header h1 { }
#header h2 { }
#content { }
#primary { }
#about { }
#secondary { }
#contact.box { }
#notify.box { }
#bookmarks.box { }
#footer { }
#footer p { }
#top { }
#logo { }
#logo a { }
#search { }
#search fieldset { }
#search fieldset label { }
#query { }
#search fieldset button { }
#header { }
#header h1 { }
#header h2 { }
#content { }
#primary { }
#about { }
#secondary { }
#contact.box { }
#notify.box { }
#bookmarks.box { }
#footer { }
#footer p { }
