HTML - Does using two dashes in class = "" mean anything? (class = "a--blue") | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

HTML - Does using two dashes in class = "" mean anything? (class = "a--blue")

On some html codes I see, they declare their class names something like this: "btn btn--positive" So, do the two dashes have some kind of function, or are they just there for the developer to understand what that button is.

30th Jun 2020, 7:50 PM
Ginfio
Ginfio - avatar
4 Answers
+ 2
Many developers use it to denote a class that describes state. e.g nav--open, box--checked. However it is just convention
30th Jun 2020, 9:00 PM
Ore
Ore - avatar
+ 5
Pretty sure it's done for readability
30th Jun 2020, 8:15 PM
♡Addy♡
♡Addy♡ - avatar
+ 3
Ginfio What you are seeing the css class .btn .btn--positive, a--blue are followed a naming convention called BEM (The Block, Element, Modifier methodology). In BEM, Modifiers are written in camel case and are preceded by two dashes --. The standard syntax for BEM is: block-name__element-name--modifier-name (B__E–M) such as, .subscribedForm__input--checked To know more about BEM refer to https://css-tricks.com/bem-101/ BEM is implemented well in postCSS https://webdesign.tutsplus.com/tutorials/using-postcss-with-bem-and-suit-methodologies--cms-24592
1st Jul 2020, 1:18 AM
Calviղ
Calviղ - avatar
+ 2
Maybe it's part of some library or framework, otherwise probably just stylistic choice
30th Jun 2020, 8:26 PM
HNNX 🐿
HNNX 🐿 - avatar