- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘Other’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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 ;]
Ok, I see your point. Thanks for suggestion.
Regards