Giter VIP home page Giter VIP logo

bem.js's Introduction

Build Status Coverage Status Code Climate

bem.js

DOM selection and manipulation using BEM (Block, Element, Modifier).

Install

Install with npm

$ npm i bem.js --save

Usage

Code examples in es6, library is es5 compatible.

Selecting an element

import BEM from 'bem.js';


// Returns HTMLElement matching .block
BEM.getBEMNode('block');

// Returns HTMLElement matching .block--modifier
BEM.getBEMNode('block', false, 'modifier');

// Returns HTMLElement matching .block__element
BEM.getBEMNode('block', 'element');

// Returns HTMLElement matching .block__element--modifier
BEM.getBEMNode('block', 'element', 'modifier');

// Returns NodeList with HTMLElements matching .block__element--modifier
BEM.getBEMNodes('block', 'element', 'modifier');

// Returns HTMLElement matching .block__element--modifier, child of node
BEM.getChildBEMNode(node, 'block', 'element', 'modifier');

// Returns NodeList with HTMLElements matching .block__element--modifier, children of node
BEM.getChildBEMNodes(node, 'block', 'element', 'modifier');

Building BEM class names

import BEM from 'bem.js';


// Returns 'block'
BEM.getBEMClassName('block');

// Returns 'block--modifier'
BEM.getBEMClassName('block', false, 'modifier');

// Returns 'block__element'
BEM.getBEMClassName('block', 'element');

// Returns 'block__element--modifier'
BEM.getBEMClassName('block', 'element', 'modifier');

Adding/removing modifiers

import BEM from 'bem.js';


// Adding a modifier
let node = BEM.getBEMClassName('foo');
BEM.addModifier(node, 'bar');  // node.className is now 'foo foo--bar'

// Adding an additional modifier
BEM.addModifier(node, 'baz');  // node.className is now 'foo foo--bar foo--baz'

// Removing a modifier
BEM.removeModifier(node, 'bar');  // node.className is now 'foo foo--baz'

// Toggle a modifier
BEM.toggleModifier(node, 'bar');

Check if HTMLElement has a modifier

import BEM from 'bem.js';


let node = BEM.getBEMNode('foo');  // <article class="foo foo--bar"></article>
BEM.hasModifier(node, 'bar')  // true
BEM.hasModifier(node, 'baz')  // false

let node = BEM.getBEMNode('foo');  // <article class="foo"></article>
BEM.hasModifier(node, 'bar')  // false

Running tests

$ gulp build  // Make sure you test against the latest build
$ gulp lint   // Check for linting errors
$ gulp test   // Run the tests

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

Author

Maykin Media

License

Copyright © 2016 Maykin Media Licensed under the MIT license.

bem.js's People

Contributors

svenvandescheur avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.