Posts list styles (SCSS)

posts_list.sass

.posts_list
  // common styles for all blocks
  // ...

  // styles for modified blocks
  &.for-most_popular
    background-color: gray

    .posts_list__title
      color: green

  &.for-most_commented
    .posts_list__title
      color: blue

    // posts with icons have special icon
    .posts_list__item
      padding-right: 30px

      &:after
        content: ''
        position: absolute
        top: 5px
        right: 5px
        background: url('icon/path.png') no-repeat 0 0
        // or we can use compass sprite for an icon
        // @include icons-sprite('comment-icon')

.posts_list__title
  color: #000

.posts_list__item
  color: #000

  // most popular posts has such modifier
  &.is-top
    color: $gold
    font-weight: bold

  &.is-active
    font-weight: bold

  // let's say, admin can select posts and delete them in admin menu
  // selected posts have 'is-selected' modifier
  &.is-selected
    background-color: #000
    color: #fff
    font-weight: bold

We are using three types of prefixes for modifiers: is-, has-, for-. They cover all cases and markup becomes "readable".

has- is usually used for icons, we render them with pseudo-elements and modifier in most cases. But also it may be used in another cases, like: 'has-shadow, has-icon, has-bottom_border' and so on.

is- used for cases like: 'is-active, is-selected, is-disabled, is-big, is-green'.

for- can help when we want to modify block in context, but to make it without cascade. Or in situations, when block is a container for something special: .container.for-tags, .container.for-posts:

.header
  .menu.for-header
.footer
  .menu.for-footer