question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Namespace all selectors and styles using BEM conventions

See original GitHub issue

I 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:open
  • Created 7 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
SethTompkinscommented, Mar 15, 2017

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.

0reactions
lcdsantoscommented, Mar 21, 2017

We ship it on v2.

It’s ok to not be backwards compatible.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found