What does id="Primary" class="content-area" mean if it does not exist in the style.css file?

Question

I’m starting now to develop themes for Wordpress and I’m studying the default theme of it. But so far I have not understood what these ID’s and classes mean that there are no configurations of their properties anywhere. I searched the internet and found nothing related.

Ex. in index.php: id="primary" class="content-area"

Ex. in header.php: id="page" class="hfeed site"

These ID’s and classes don’t exist anywhere, would it be just to "visually standardize" the code to be clearer? Removing them does not happen anything in Theme, the style remains the same in their respective Divs.

Answer 1

First, it is worth remembering that the presence of classes or Ids in tags HTML does not have as its exclusive purpose the stylization through a file .css. Behold in this fiddle that div#click does not have any kind of styling. I used the ID only to attach a function to the click event on it.

From this point on, I searched the class .hfeed in all WP files (not just theme files), and in the file \wp-admin\js\bookmarklet.js, line 115, found the following code snippet:

if ( document.body.getElementsByClassName ) {
    content = document.body.getElementsByClassName( 'hfeed' )[0];
}

That is to say, .hfeed will be used for something. If you remove the class, this functionality is lost. According to the comment of Renan, this particular class is used for things like blog feed and etc.

In sequence, I searched for the class .content-area, and only found occurrences inside the theme folders. And, inside the twentyfifteen, Behold, it has no reference anywhere. Neither in the JS, in the css, nothing! No twentyfourteen it is still possible to find passages like:

.ie7 .content-area {
    padding-top: 48px;
 }

that still deal a little with the stylization of the content, whatever it may be. But no twentyfifteen, she just shows up PHP, like pure Markup, with no events or styles attached to it. That, ultimately, makes the class useless? See, you agree that reading

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        # ...
        # ...
    </main><!-- .site-main -->
</div><!-- .content-area -->

is much easier than reading

<div>
    <main>
        # ...
        # ...
    </main>
</div>

?

With the classes (and the comments, see) it is much easier to understand what the role of each of the elements is, and understand their responsibilities within the operation of the template, even more so in WP, where these roles are always well defined. Besides, if you need to style something (for example, change the background of all content areas for blue), class is already there for you. It makes your job easier, no?

In short, are classes useless? No!