Namespace all selectors and styles using BEM conventions
See original GitHub issueI have been using your awesome library recently and have run into some issues with how the selectors architected. Classes like .button
can cause a mess when you also have a standard .button
component in your style sheet.
I propose to namespace all selectors for this library appropriately using BEM conventions. The root element should be .selectric
and all other elements as .selectric__element-name
. This would also require changes to the stylesheet.
Would you be interested in this contribution? I would be happy to take the time to put together a PR if it would be considered.
Issue Analytics
- State:
- Created 7 years ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Naming convention / Methodology / BEM - BEM Info
Naming convention. The name of a BEM entity is unique. The same BEM entity always has the same name in all technologies (CSS,...
Read more >Naming - BEM
Using proper naming will prepare you for the changes in design of the website. ... Within a given block, all elements are semantically...
Read more >BEM 101 - CSS-Tricks
The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS.
Read more >How To Write Cleaner CSS With BEM - Web Dev Simplified Blog
This article covers everything you need to know about BEM in order to start using BEM to clean up and organize your CSS...
Read more >CSS Naming Conventions that Will Save You Hours of ...
The BEM Naming Convention. Teams have different approaches to writing CSS selectors. Some teams use hyphen delimiters, while others prefer ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Yea, this would be a backwards-incompatible change, requiring a major version # bump.
It looks like most of the selectors are covered using the prefix option, however even if you use that option
.button
,.label
,.selected
, and.last
are hardcoded classnames that float in the global namespace.I would recommend removing that functionality, I don’t think it is integral to this lib.
We ship it on v2.
It’s ok to not be backwards compatible.