Comments (3)
@Maximilianos In that case, we use BEM modifier classes (e.g. .control--important
). It's a different idea: js- classes are used as hooks to attach functionality to widgets, BEM modifier classes are toggled based on given criteria.
from css-style-guide.
Ok, good. That's what I do too. (I've opened this issue because it's something that's troubled me while developing)
But, how do you handle the cases where you have one re-usable bit of JS and you want it to work with a bunch of Blocks?
For example, let's say you have a few blocks like control
, menu
, footer
and when you click on one you want to add an active class to it so that you can style it differently. (This is a simple example just to illustrate the issue).
The JS code you have, attaches itself to the [data-toggleable]
selector and handles adding or removing the active class for each element. You want your CSS to not know about your JS and you want your JS not to know about your CSS (within reason). So how do you add the correct control--active
or menu--active
classes?
I've been using the following as a solution to this:
/**
* Assuming the first className of
* the given element is its base
* className, return it
*
* @param element
* @returns {*}
*/
export function getBaseClassName(element) {
return !!element.classList && element.classList[0];
}
/**
* Return a BEM className for
* the given element with the
* given modifier
*
* @param element
* @param modifier
* @returns {*}
*/
export function getBEMModifier(element, modifier = 'active') {
const baseClassName = getBaseClassName(element);
return !!baseClassName && `${baseClassName}--${modifier}`;
}
So for <div class=“foo foo—bar left top”></div>
, getBEMModifier(div, ‘baz’)
would return foo—baz
.
Is this similar to what you do? How do you solve this? Thanks and sorry for the long post!
from css-style-guide.
@Maximilianos That's a tricky one. I think this is where utility state classes come in handy. For states that can be common between blocks, we try to use .is-active
instead of .block--active
. This applies to states like active, disabled, hover, expanded etc. We then reserve BEM modifier classes for bespoke cases (like .modal--dark
). So you only have to add a single class in your JS code, not cater for different blocks.
from css-style-guide.
Related Issues (1)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from css-style-guide.