Why is it often claimed that the name of the classes .page-head {} .sub-content {} more correct than .page_head {} .sub_content {} ?
Is it just a long tradition or does it really make a lot of sense?

  • one
    In terms of performance there is no sense, in terms of convenience there. I advise you to familiarize yourself with the BEM methodology - RTK
  • 2
    In general, it all comes down to agreeing on the rules for naming classes, markup, etc., and then everyone in the team sticks to these rules. - slowBro
  • ru.bem.info/methodology/naming-convention and Google, in its standard, generally calls for not using anything but a hyphen - Alex
  • @RTK Please try to publish detailed answers containing a specific example of the minimum solution, supplementing them with a link to the source. Answers –references (as well as comments) do not add knowledge to the Runet. - Nicolas Chabanovsky ♦
  • @RTK I still see only one difference, the fact that names with a hyphen cannot be copied with a double click, but with underscores you can. Nevertheless, for some reason I got used to writing with a hyphen just because they did everything when he studied. - Telion

3 answers 3

Each language has its own rules for defining the default code, the most used. In different languages, they may be different.

For example, for C # functions, it is customary to name functions in UpperCamelCase ( PascalCase another name) MyFunctionMakeThis .
In JavaScript lowerCamelCase myFunctionMakeThis

I do not say that these rules must be followed, this decision is made by everyone (and each team).

In the case of CSS, the most used standard is kebab-case

Example .my-item-selector .

What is the use of standard code design rules:

  • A simpler understanding of the code by programmers (for example, new to the company, or generally external to the project).
  • Uniform style for different components and programs.

    In general, the correct name is through BEM. You can read about it here.

    This is very convenient if you use preprocessors (and later you will use them), also for elements that are processed by some scripts set different prefixes. For example: class="header__logo js-logo-click" recommend to get acquainted with this methodology.

    • I reread it ten times, so I did not understand anything .... - Air

    It makes sense if you use the BEM methodology! To separate words in names, a hyphen (-) is used. The element is separated from the block by two underscores (__). The modifier is one (_). More details can be found here.