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.

The HTML 4.01 spec states that ID tokens must begin with a letter ( [A-Za-z] ) and may be followed by any number of letters, digits ( [0-9] ), hyphens ( – ), underscores ( _ ), colons ( : ), and periods ( . ).

A Basic Valid CSS Class Name A valid name should start with an underscore (_), a hyphen (-) or a letter (a-z) which is followed by any numbers, hyphens, underscores, letters. A name should be at least two characters long. Cannot start with a digit, two hyphens or a hyphen followed by a number.

Hyphens are valid to use in CSS and HTML but not for JavaScript Objects. A lot of browsers register HTML Ids as global objects on the window/document object, in big projects, this can become a real pain. For this reason, I use names with Hyphens this way the HTML ids will never conflict with my JavaScript.

It means private fields or private methods. Methods that are only for internal use. They should not be invoked outside of the class. Private fields contain data for internal use. They should not be read or written into (directly) from outside of the class.

Letter-Casing and Special Characters Always favor lowercase, for elements, for attributes and their values, for classes and ids. No other special characters should be used for separating words, and there should never be capitalization of the next word.

A CSS ID selector uses the ID attribute of an HTML element to select one unique element on a page. To use an ID selector in CSS, you simply write a hashtag (#) followed by the ID of the element. Then put the style properties you want to apply to the element in brackets.

Double Underscore is used to define sub element of a block. i.e: Text Where main-nav is a block & main-nav__item is a sub element.

The hyphens CSS property specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.

In HTML 4, ID values must begin with a letter, which can then be followed only by letters, digits, hyphens, underscores, colons and periods.

It can add lines above, under, and through the text. This CSS property decorates the text with several kinds of lines. It is the shorthand for text-decoration-line, text-decoration-color, and text-decoration-style. The property text-decoration-line is used to underline the text.

There isn’t one. I use underscores all the time, due to hyphens messing up the syntax highlighting of my text editor (Gedit), but that’s personal preference. I’ve seen all these conventions used all over the place.

For example, if you’ve got your underscore key on the underside of the keyboard (unlikely, but entirely possible), then stick to hyphens. Just go with what is best for yourself. Additionally, all 3 of these conventions are easily readable. If you’re working in a team, remember to keep with the team-specified convention (if any).

The final CSS file should be something like the code below: The final HTML page should call the external CSS and should include both the classes while styling elements. The code for the HTML page should be like below: Save this code and open the HTML file through a browser. The final output should look somewhat similar to the screenshot below: