CSS Class names

I’m currently working through the Chrome Dev Tools section of the Front End Developer syllabus. Previous topics discuss best practices for naming ID’s and class names. Providing descriptive names that help other developers (not the authors) to understand the code.

When inspecting Codecademy’s home page I see class names such as:

Whilst this naming convention remains constant throught the page it makes no sense to me. Can some please explain?

Kind regards


We cannot see what you posted for an example. Please use Markdown to format it so we can see it.

1 Like

Hi there! In addition to @mtf `s words, here’s a guide detailing how to show code properly:

1 Like

Yeah, apologies still trying to figure out all the bells and whistles. Below is an example of what I was refering to:

<div class="gamut-otnx7u-AppWrapper e123k1yw0">

I haven’t included all the code from this particular

I’m just interested to learn best practice in terms of ID / class naming conventions.



1 Like

Gotcha. That means we hear you. For now, set this level of identification completely aside. It is not a license to go hari-kari on our chosen names Those are ‘hashes’, a totally 'nother thing for way down the road when the computer is building our pages on demand.

Let’s say we were coding along the old lines of 2000’ish. Please entertain this idea…

<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>

Somewhere in there we stumble upon, class="header" (not likely, but…), class="main" (likely) and class="footer" (also not likely). The point here is that we have identified three important areas in the document. Whatever classes we assign in those areas can never supersede their parent, hence, ‘class’. They are on the specificity chart one level lower,

Focus, for the moment on the power that single class, ‘main’ has in any of the three primary contexts. It elevates all its elements to the next level of specificity. Just like that. This is basic, and it is simple, but it is also abstract. Don’t pace ahead if specificity is crux in your understanding. Pause, bone up on the subject, then proceed. Forgive me if this sounds like a lecture. It’s meant to be straight out of a manual.


No that was perfect thank you

1 Like