Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Different approach to OOCSS

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #150190
    Anonymous
    Inactive

    Hi guys! Right now I’m creating new, let’s say a little bigger project, so it will have a lot of css. I’ve come up with small solution for inheriting styles. So here’s the deal.

    I have some type of icons like: functional-icons, social-icons, small-icons. They have some common attributes, like:

    background-color: #92989b;
    background-repeat: no-repeat;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    

    And when I’m writing HTML I’m using only:

    <span class="functional-icon-cart"></a>
    <span class="social-icon-twitter"></a>
    

    I can make it, because I used attribute selectors, so my definition of my style looks:

    // Generic styles of all icons. 
    [class*="-icon"] { 
      background-repeat: no-repeat; 
      border-radius: 50%; 
      display: inline-block; 
      cursor: pointer; 
    }
    
    
    // Generic styles of functional icon type. 
    [class*="functional-icon"] { 
      background-color: #2eb398; 
      background-image: url("../img/functional-icons.png"); 
      height: 34px; 
      width: 34px; 
    }
    

    And after that I can just write simple class which is addressing specific icon, like:

    .functional-icon-cart { 
      background-color: red; 
    }
    

    What do you think about this approach? Actually I didn’t see that before in many places. I saw a little bit of it in grid systems ([class="column"]). And I’m not sure if it’s good solution. Writing styles in that way is just pure breeze. Really easy. But I was thinking any traps that might occur because of that.

    Thanks for any opinions and suggestions.

    Regards ;]

    #150290
    Anonymous
    Inactive

    Ok, I see your point. Thanks for suggestion.

    Regards

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘Other’ is closed to new topics and replies.