patternhtmlModerate

Most basic HTML website - naming and CSS rules

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

websitemostcssnamingandruleshtmlbasic

Problem

I'm trying to accomplish something very simple as seen here.

HTML

CSS

.container {
    padding-left: 80px;
    padding-right: 80px;
}
#header {
    height: 50px;
    line-height: 50px;
    background-color: blue;
}
#header_nav {
    float:right;
}
#header_nav li {
    display: inline-block;
}

Questions:

Am I using the IDs and classes correctly? For example, should header be an ID or class?

Is my naming convention ok?

Should I be using nested rules instead? E.g #header ul li { ... }

Is this the best way to achieve this layout?

Any advice at this stage would be good, so I can take these practices forward when doing the next steps of the structure.

Solution

You should be using HTML 5 elements such as header and nav making some/all classes and IDs unnecessary:

Code Snippets

<header>
    <nav>
        <img src="#">
        <ul>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </nav>
</header>

Context

StackExchange Code Review Q#61678, answer score: 11

Revisions (0)

No revisions yet.