vue-bemthis
v1.0.0
Published
A simple utility for conditionally creating classes in BEM methodology, vue compatible for module styles
Downloads
2
Maintainers
Readme
Vue BEM this !
A simple utility for conditionally joining classes together following BEM methodology
Documentation
BEM documentation: https://getbem.com/
Install
Install inside your project using NPM
npm install vue-bemthis
Usage
vue-bemthis works better with SCSS modules for scoped styles. In this example we use SCSS but this also works with CSS
Then, declare it like this in your Vue component:
<script setup lang="ts">
import { useBem } from "vue-bemthis";
const { block, element } = useBem();
</script>
vue-bemthis automatically detects the block of you SCSS file, in your Single file component.
If you respect the BEM methodology, it should be the only class with no "__" or "--". In any case, if you need to override the default block found, you can do useBem('some-other-block-name')
.
Then, in your template, you can use it like this:
Basic usage
<ul :class="block()">
<li :class="element("item")">
<a href="example.com" :class="element("link")">
Link
</a>
</li>
</ul>
Usage with modifiers
vue-bemthis also gives you the possibility to add modifier for both block and elements. You have multiple ways to apply modifiers.
For example for a block named "list", it will get the scoped styles for:
block("listModifier")
->.list .list--listModifier
block(["one", "two"])
->.list .list--one .list--two
block({ one: true, two: false })
->.list .list--one
Of course, it works the same with element. For example for an element "item":
element("item", "itemModifier")
->.list__item .list__item--itemModifier
element("item", ["one", "two"])
->.list__item .list__item--one .list__item--two
element("item", { one: true, two: false })
->.list__item .list__item--one
Styles
Also, you SCSS could look like this. Notice that we use module
CSS instead of scoped
, but styles are still scoped to your component this way.
<style module lang="scss">
.list {
// styles for list
&--listModifier {
// styles for list with modifier "listModifier"
}
&__item {
// styles for item
&--itemModifier {
//styles for item with modifier "itemModifier"
}
}
&__link {
// styles for link
}
}
<style>
Short syntax
vue-bemthis gives you the possibility to replace block
and element
methods with respective alias b
and e