Why is it not recommended to use "_" (underscore) in HTML/CSS?


Viewed 1,321 times


I’ve seen people recommend never using _ (underscore) in HTML and CSS. Instead, we should give preference to -.


// Errado
<div id="minha_div" class="minha_classe"></div>

// Certo
<div id="minha-div" class="minha-classe"></div>

Why is there such a recommendation?

  • I believe that today is by nostalgia or by ancient custom, there is no official standardization in the W3C specifying this

3 answers


The 1996 CSS1 specification did not allow underscore in class names or IDS, unless they were "escaped"

p.#minha\_id {
  color: #fff;

CSS2 (published 1998) banned the use of the underscore. A later errata (2001) made use again permitted.

Nowadays virtually all browsers accept the underscore, but the recommendation not to use it remains.

  • 2

    Mas a recomendação de não utilizar se mantém But there’s no particular reason then?

  • 6

    @Andrey The reason is this: there is no way to guarantee for sure that the browser the user is using supports underscore, although every modern browser supports.

  • 4

    The CSS1 specification is already legal - if you use underscores in your CSS and the user’s browser have problems with this, the problem is composed by the user and the browser, not by your CSS. Anyway, +1 for the answer - I would never have found that without seeing it.


To complement @Beet’s reply, I’ll leave a opinion, on the subject:

In addition to the official CSS specifications Dashes (strokes), I believe that Dashes is recommended also for code convention issues, example:

pseudo-elements: first-letter, first-line ...
pseudo-classes: :first-child, :nth-child ...
estates: text-decoration, background-color, and etc...

Note that the second option below seems better written according to the language

.minha_classe:first-letter {font-size:300%;}
.minha-classe:first-letter {font-size:300%;}

It can 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, example:

<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 unrelated to CSS doubt, as this matter Dashes vs Underscores, Until recently, Google treated underscore (css_html) words 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 user friendly url using Dash instead of underscore.

  • Well placed. So it looks much more uniform.


I’m working with BEM’s methodology and I’m really enjoying it, readable code is all!

A simple summary:

The acronym BEM for Block Element Modifier (Element Modifier Block), suggests a structure to name the classes of your style sheet based on the element in question. When using the BEM methodology it is important to remember that it ensures the use of CSS classes and not 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 : An element is a "part" 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 Search Button are elements of a Search Block:

.block__element {}


Modifier : The BEM methodology suggests that if you need to create a modifier, it should be done by adding two hyphens ( - ) after the name of the element or block to be modified. Which gives us a structure that looks like this:

.block--modifier {}

.block__element--modifier {}

.header__navigation {}

.header__navigation--secondary {}

Assuming that your secondary navigation will probably have the same aspects as the previous one.

source: u.planb.com.br/blog/ti/methodology-well/

Browser other questions tagged

You are not signed in. Login or sign up in order to post.