Naming conventions HTML

Hi I am not sure I fully understand your question but if you are reffering to CSS naming conventions there are a few that many people use such as:

BEM (Block Element Modifier)

.block {}
.block__element {}
.block--modifier {}

Examples:

.site-navigation {} /* Block */
.site-navigation__button {} /* Element */
.site-navigation--full {} /* Modifier */

/* BEM */
.person {} /* Block */
.person__hand {} /* Element */
.person--female {} /* Modifier */
.person--female__hand {} /* Element */
.person__hand--left {} /* Modifier */

/* Normal CSS */

.person {}
.hand {}
.female {}
.female-hand {}
.left-hand {}

Both of the above work fine but BEM allows other developers reading your CSS to quickly understand how a class is used and identify which other classes it is related to.

OOCSS (Object Orientated CSS)

The Main princible behind Object Orientated CSS is to write CSS with forethought into code re-use and duplication. Some people do not see it as best practice because it can clutter your HTML but I find myself using OOCSS far more in my personal projects then any other naming convention / CSS syntax because if done correctly can really speed up your site.

Example:

/* Normal CSS */

.header-navigation {
    width: 980px;
    margin: 0 auto;
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
    padding-top: 20px;
    padding-bottom: 20px;
    height: 260px;
}

.content-wrap {
    width: 980px;
    margin: 0 auto;
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
        padding-top: 55px;
        padding-left: 20px;
        height: 800px;
}

<div class="header-navigation"></div>
<div class="content-wrap"></div>

As you can see in the above example there is a lot of code duplication between the class .header-navigation and .content-wrap. You can save space and size in your style sheet by creating a class to share the common attributes.

For example:

/* OOCSS */

.globalwidth {
    width: 980px;
    margin: 0 auto;
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
}

.header-navigation {
    padding-top: 20px;
    padding-bottom: 20px;
    height: 260px;
}

.content-wrap {
        padding-top: 55px;
        padding-left: 20px;
        height: 800px;
}

<div class="globalwidth header-navigation"></div>
<div class="globalwidth content-wrap"></div>

The benifets of OOCSS is that you can easily re-use classes without duplication.

Title CSS

With Title CSS you use a capitalized name for any global CSS class. For any modifier or descendant class you use a lowercase letter.

For example:

<!-- HTML Markup -->
<div class="Title isModified">
    <p class="descendant">
</div><div class="Title isModified">
    <p class="descendant">
</div>

/* Corresponding Title CSS */

.Title {}
    .Title.isModified {}
    .Title .descendant {}

Some developers find it easier to read Title CSS in HTML markup, I personally do not like using it myself.

There is no real right or wrong with CSS but there are many different syntax that developers commonly use and see as best practices, although BEM is seen as the benchmark for CSS syntaxs and is very commonly used in large projects that involve more than one developer modifying the same CSS files.

Hope this helped :)