I've seen people recommend never using _ ( underscore ) in HTML and CSS. Instead, we should give preference to - .
Example:
// Errado
<div id="minha_div" class="minha_classe"></div>
// Certo
<div id="minha-div" class="minha-classe"></div>
Why is there such a recommendation?
The 1996 specification of CSS1 did not allow underscore in class or IDS names, unless they were "escaped"
p.#minha\_id {
color: #fff;
}
CSS2 (published in 1998) banned the use of underscore. A later erratum (2001) made use again permitted.
Nowadays almost all browsers accept the underscore, but the recommendation not to use remains.
To complement @Berraba's response, I'll leave a opinion on the subject:
In addition to the official CSS specifications use dashes, I believe dashes is also recommended for code conventions, eg:
pseudo-elements: first-letter , first-line ... pseudo-classes: :first-child , :nth-child ... > properties: text-decoration , background-color , and etc ...
Note that the second option below looks better written in language
.minha_classe:first-letter {font-size:300%;}
.minha-classe:first-letter {font-size:300%;}
It may be difficult to notice in this simple code, but imagine in hundreds or thousands of lines written in the first way.
Now imagine when we use Bootstrap for example, to add a specific class to the code, eg:
<div class="col-lg-12 minha_classe"></div>
<div class="col-lg-12 minha-classe"></div>
Again it seems better to use dash.
Now a curiosity not related to CSS doubt, according to this matter Dashes vs Underscores until recently, Google treated words separated by underscore (css_html) as a single word and words separated by dash (css-html) as distinct words. This is why it is very common when we work with friendly url using dash instead of underscore.
I'm working with the BEM methodology and I'm really enjoying it, readable code is everything!
A simple summary:
A GOOD acronym for Block Element Modifier, suggests a structure for naming the classes of your style sheet based on the element in question. When we use the BEM methodology it is important to remember that it uses CSS classes instead of IDs because the classes are reusable.
Block : A block can be simple or composed (contain other internal blocks), basically it works as a container
.block {}
Element:Anelementisa"piece" of the block. We have the block as a container and the elements are the parts inserted in it, which perform specific functions.
An Input and a Search Button are elements of a Search Block:
.block__element {}
Modifier : The BEM methodology suggests that if a modifier needs to be created, it must be done by adding two hyphens (-) after the name of the element or block to be modified. What gives us a structure with this aspect:
.block--modifier {}
.block__element--modifier {}
.header__navigation {}
.header__navigation--secondary {}
Assuming your secondary navigation is likely to have the same aspects as the previous one.
source: u.planb.com.br/blog/ti/metodologia-bem /