In the project I am currently working on, the previous developers took an interesting approach by constructing all the selectors based on individual properties.
For instance:
.panel .selected a, a.selected-thumb, .date-picker input[type="submit"], .heading-end a, .errormessage .search-box input[type="submit"],
.search-results .search-box input[type="submit"], .article-box-heading.red, .opinion-heading a,
.no-js .tab > a:hover, .touch .tab > a:hover, .tab > .active,
.box-bottom h5 a, .directory dt a,
.directory dd a:hover, .footer-copy p a
{
color: #fff;
}
The stylesheet is quite lengthy at 5000 lines. I am considering separating each selector and organizing them into rules with their corresponding properties.
Is there a solution available for this?