Skip to content

Instantly share code, notes, and snippets.

@lukaszklis lukaszklis/name-badge.css Secret
Created Jan 17, 2017

Embed
What would you like to do?
/* Default variant */
.name-badge {}
.name-badge__name {}
.name-badge__avatar {}
.name-badge__description {}
/* Small variant */
.name-badge--small {}
.name-badge--small .name-badge__name {}
.name-badge--small .name-badge__avatar {}
.name-badge--small .name-badge__description {}
<!-- Default variant -->
<div clas="name-badge">
<div class="name-badge__name"></div>
<img class="name-badge__avatar">
<div class="name-badge__description"></div>
</div>
<!-- Small variant -->
<div clas="name-badge name-badge--small">
<div class="name-badge__name"></div>
<img class="name-badge__avatar">
<div class="name-badge__description"></div>
</div>
@lukaszklis

This comment has been minimized.

Copy link
Owner Author

commented Jan 17, 2017

When using a modifier for the parent element only, and using the selector as shown above, the only thing you have to change is the class name for the parent element, and not changing class names for all elements inside of the parent. Not necessarily everything would have to be overwritten by the modifier (for instance, the font-size of the description wouldn’t change, or description would be even hidden in the "small" version).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.