Why are dashes preferred for CSS selectors / HTML attributes ?

CSS is a hyphen-delimited syntax language which means while writing HTML attributes we can use hyphen(-).

Example:

font-size, line-height, background-color, etc...

There are various reasons to preferring hyphen(-):

  • In CSS, one can use underscore(_) instead of hyphen(-) for CSS selectors(class, id, span, …), but preference is given based on its ease to use.
  • Underscores require hitting the Shift key and are therefore harder to type. On the other hand, CSS already uses hyphen or dash as the part of their official code so it makes more convenient to use a hyphen rather than using underscore.
  • Instead of using dashes, we can also use camel case to write but it has issues to use it like, it is harder to read and whitespace between the word makes them more clear to read.
  • There is also one more benefit of using dashes that it makes the code more readable.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
      
    <title>
        Why are dashes preferred
        for CSS selectors / HTML
        attributes ?
    </title>
  
    <style media="screen">
        .Geeks-for-Geeks-Example-1{
            background-color: forestGreen;
            color: white;
            height: 10vh;
            text-align: center;
            font-size: 4.5vh;
        }
        .GeeksforGeeksExample2{
            background-color: Orange;
            color: white;
            height: 10vh;
            text-align: center;
            font-size: 4.5vh;
        }
        .Geeks_for_Geeks_Example_3{
            background-color: tomato;
            color: white;
            height: 10vh;
            text-align: center;
            font-size: 4.5vh;
        }
    </style>
</head>
  
<body>
  
    <!-- Easy to read and write class name -->
    <div class="Geeks-for-Geeks-Example-1">
        This is sample text for the class
        name containing a hyphen.
    </div>
    <br>
      
    <!-- Difficult to read class name -->
    <div class="GeeksforGeeksExample2">
        This is sample text for the class
        name not containing a hyphen.
    </div>
    <br>
  
    <!-- Difficult to write class name -->
    <div class="Geeks_for_Geeks_Example_3">
        This is sample text for the class
        name containing an underscore.
    </div>
</body>
  
</html>

chevron_right


Output:

From the above code, it is clear that using dash is a more appropriate way of writing program instead of using a camel case or underscore and thus, due to this fact dashes are preferred for CSS selectors/HTML attributes.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.