Return to Answer

• div.pagination is overqualified. A container is almost everytime going to be a div, so you just can write .pagination

• In many cases, there is no use for an extra container. You might as well apply the pagination class to the list itself: <ul class="pagination">

• You also have a lot of redundancy in your selectors because you always use ul and li in the chains. This is not necessary and could be made easier:

   .pagination ul {}
   /* li's can only appear in lists, no need to add it to the selector */
   .pagination li {}
   /* The only links inside your pagination are usually in relation to the pagination */
   .pagination a {}
  

• If you have lists inside your pagination that need seperate styling, use seperate classes or place them outside of the actual pagination

• Don't overqualify the .active and .disabled classes as well. They will end up being on the list items anyway

You nest far too deep. Avoid nesting selectors deeper as 2–3 levels. Otherwise you get bloated CSS like this.

• div.pagination is overqualified. A container is almost always going to be a div, so you just can write .pagination

• In many cases, there is no use for an extra container. You might as well apply the pagination class to the list itself: <ul class="pagination">

• You also have a lot of redundancy in your selectors because you always use ul and li in the chains. This is not necessary and could be made easier:

   .pagination ul {}
   /* li's can only appear in lists, no need to add it to the selector */
   .pagination li {}
   /* The only links inside your pagination are usually in relation to the pagination */
   .pagination a {}
  

• If you have lists inside your pagination that need separate styling, use separate classes or place them outside of the actual pagination

• Don't overqualify the .active and .disabled classes as well. They will end up being on the list items anyway

You nest far too deep. Avoid nesting selectors deeper than 2–3 levels. Otherwise you get bloated CSS like this.

Compare my SCSS to yours:

.pagination {
 display: block;
 height: 24px;
 margin-left: -5px;
 li {
 float: left;
 display: block;
 height: 24px;
 color: #999;
 font-size: 14px;
 margin-left: 5px;
 &:hover a {
 background: $bgltblue;
 }
 &.disabled {
 a {
 cursor: default;
 color: #999;
 &:hover,
 &:focus {
 background: transparent;
 }
 }
 }
 &.active {
 a {
 background: $headblue;
 color: white;
 font-weight: normal;
 cursor: default;
 &:hover,
 &:focus {
 background: $headblue;
 }
 }
 }
 }
 a {
 display: block;
 padding: 1px 7px 1px;
 color: #555;
 font-weight: normal;
 &:focus {
 background: $bgltblue;
 }
 }
}

Some comments on your style of selecting:

• div.pagination is overqualified. A container is almost everytime going to be a div, so you just can write .pagination

• In many cases, there is no use for an extra container. You might as well apply the pagination class to the list itself: <ul class="pagination">

• You also have a lot of redundancy in your selectors because you always use ul and li in the chains. This is not necessary and could be made easier:

   .pagination ul {}
   /* li's can only appear in lists, no need to add it to the selector */
   .pagination li {}
   /* The only links inside your pagination are usually in relation to the pagination */
   .pagination a {}
  

• If you have lists inside your pagination that need seperate styling, use seperate classes or place them outside of the actual pagination

• Don't overqualify the .active and .disabled classes as well. They will end up being on the list items anyway

General conclusion:

If you don't style the ul itself, remove it from the selector.

If you don't style the li itself, remove it as well.

And so on.

Some comments on your style of selecting:

• div.pagination is overqualified. A container is almost everytime going to be a div, so you just can write .pagination

• In many cases, there is no use for an extra container. You might as well apply the pagination class to the list itself: <ul class="pagination">

• You also have a lot of redundancy in your selectors because you always use ul and li in the chains. This is not necessary and could be made easier:

   .pagination ul {}
   /* li's can only appear in lists, no need to add it to the selector */
   .pagination li {}
   /* The only links inside your pagination are usually in relation to the pagination */
   .pagination a {}
  

• If you have lists inside your pagination that need seperate styling, use seperate classes or place them outside of the actual pagination

• Don't overqualify the .active and .disabled classes as well. They will end up being on the list items anyway

Conclusion:

You nest far too deep. Avoid nesting selectors deeper as 2–3 levels. Otherwise you get bloated CSS like this.