Created by: karthikv
As per my description on issue #100 (closed), selectors like these:
.topbar form input
.pagination ul li a
.topbar ul li ul li a
.tabs li a
should be replaced by more efficient and simplified counterparts that don't have prodigal descendants:
.topbar input
.pagination ul a /* or */ .pagination li a
.topbar ul ul a /* or */ .topbar li li a
.tabs a
The commits associated with this pull request achieve many optimizations similar to the ones above in all LESS files that need them. In addition to the aforementioned examples, selectors with non-generic class names as descendants, like so:
.modal .modal-body
table .headerSortUp
have also been optimized by simply removing the parent selector:
.modal-body
.headerSortUp
This has only been done where class names are unique and quite unlikely to be re-used elsewhere.
In terms of statistics, five of the eight LESS files benefited from these optimizations, many in a significant manner. More than just greater efficiency, this also cut down about 700 bytes (~2%) from the minified stylesheet. Considering that the only change was to selectors, I would say this is a nice bonus.
Even though this takes care of many optimizations, there are still various methods to accomplish even more. For example, because a decent number of class names are generic, the selectors including them require more context and therefore more complexity. Changing the markup to supplant optimization and circumvent these cases is a frontier not explored in these commits. Re-thinking the CSS structure as a whole can also result in insights of what can be consolidated. For these reasons, I ask that you continue to keep issue #100 (closed) open so that further optimization—and discussion regarding it—is continually strived for.