1

So I've got this code I worked through a tutorial with.

It is: <div>Navbar__Link Navbar__Link-toggle</div>

My question is what the unscores represent? A break into a second classes. It's just a weird naming convention and feels very alien.

Adam Buchanan Smith
  • 9,422
  • 5
  • 19
  • 39
Darthmal Vader
  • 11
  • 1
  • I formatted your code, which had hidden '
    's in it. Can you verify that this is correct before people start answering?
     – ps2goat Jun 13 '19 at 19:46
  • I'm not sure I understand the question but underscore is not presenting anything. In the best case is more like convention, not a rule. Css "doesn't care" if it underscore or the letter `a` or any other allowed characters. – Mosh Feu Jun 13 '19 at 19:51
  • BEM: https://mattstauffer.com/blog/organizing-css-oocss-smacss-and-bem/ – Michelle Jun 13 '19 at 20:06

1 Answers1

1

The double underscores are a naming convention used in "Block Element Modifier" style CSS, used to define the sub-element of a block.

So, Link is a sub-element of Nav, etc.

see this answer :

this is done because some people might name their block like this main_nav which will create confusion with single underscore like this : main_nav_item

Scott Weaver
  • 7,192
  • 2
  • 31
  • 43
  • Scott Thanks for putting this straight. never heard of BEM.
    Navbar__Link Navbar__Link-toggle
    I'd been trying rework them as classes like so : navbarLink, navbarLinkToggle. Would this be right. I'm just getting my head around this.     – Darthmal Vader Jun 14 '19 at 14:47
  • I actually don't use BEM either, and that's fine and a matter of taste - especially if you aren't dealing with a particularly complex DOM – Scott Weaver Jun 14 '19 at 17:55