What does id="primary" class="content-area" if they do not exist in the style.css file?

Question

What does id="primary" class="content-area" if they do not exist in the style.css file?

Navigation

#1 by (4 votes)

0

I'm now starting to develop themes for WordPress and I'm studying the default theme of it. But so far I do not understand what the meaning of these ID's and classes is that there are no settings of their properties anywhere. I searched the internet and found nothing related.

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

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

These ID's and classes do not exist anywhere, would it be just to "visually standardize" the code to be clearer? Removing them does nothing happen in the Theme, the style remains the same in their respective DIVs.

html5 css3 wordpress front-end

asked by anonymous 15.10.2015 / 18:26

1 answer

Turning the text of a variable into an array how to send a kind of form without button?

score 4 · Answer 1

First of all, it is worth remembering that the presence of classes or IDs in HTML tags does not have the sole purpose of styling through a .css file. See in this fiddle that div#click does not have any type of stylization. I used the ID just to link a function to the click event on it.

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

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

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

I then searched for the class .content-area , and found only occurrences within the theme folders. And, within twentyfifteen , behold, it has no reference anywhere. Not even JS , no css , nothing! In twentyfourteen it is still possible to find excerpts like:

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

That still treat a bit of the stylization of the content, whatever it may be. But in twentyfifteen , it only appears PHP , as pure markup, with no events or styles attached to it. Does this ultimately make 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 -->

It's much easier than reading

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

?

With classes (and comments, see), it is much easier to understand what the role of each of the elements is, and to understand their responsibilities within the template operation, especially in WP, where those roles are always good defined. Otherwise, if you need to stylise something (for example, swap the all background of the content areas to blue), the class is already there for you. It makes your job easier, does not it?

In short, are classes useless? No!