CSS Tag Targeting

SimonTemplar · 10-02-2015 6:44pm #1

Just looking for some best practice advice regarding CSS.

For illustrative purposes, let's say I have something like:

<h1> My Website </h1>

The H1 tag obviously only appears once in my page. Is it acceptable/good practice to simply target the H1 tag in my CSS or should I add a class to the tag and target that class instead. In this case, the only reason I would be adding a class to the H1 is to target it in CSS.

Vurnon San Benito · 10-02-2015 10:19pm

SimonTemplar wrote: »
Just looking for some best practice advice regarding CSS.

For illustrative purposes, let's say I have something like:
<h1> My Website </h1>
The H1 tag obviously only appears once in my page. Is it acceptable/good practice to simply target the H1 tag in my CSS or should I add a class to the tag and target that class instead. In this case, the only reason I would be adding a class to the H1 is to target it in CSS.

Depends if you want to do something with the h1 that is also planned for other elements of the page then you'd use a class (a style that you plan on reusing elsewhere, be it colours, font-weight, other attributes).

If it's a simple page with just once instance of the h1 tag, then you'd be safe enough targeting the h1 tag itself.

Aswerty · 11-02-2015 8:44am

My general approach would be:

If I want to set a default style for an element I will style the tag itself.

h1 {
}

If I want to style multiple instance of an element but not change the default style I'll use a class.

.alt-header {
}

If I only want to style a specific instance of an element I will use the element's id.

#special-header {
}

A single element could be styled using all three approaches, this can be the case when you need to further decorate a default style.

tricky D · 11-02-2015 2:11pm

There's no problem having multiple h1s on a page if they are semantically correct like a list of pulled-in news article headings. The one h1 only is a bit of a myth or hangover from people spamming content as h1 which an indexer can easily address.

Aswerty lists 3 basic and most commonly used methods for handling the css but there are at least 2 other ways to handle this:

if you have the following h1s in a section for example and the first h1 is outside of that section you can use
```
section h1 {}
```
for selection

then there's the CSS3 :first-of-type Selector eg.

<!DOCTYPE html>
<html>
<head>
<style> 
h1:first-of-type {
    background: #ff0000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<h1>This is a heading</h1>
<h1>This is a heading</h1>
</body>
</html>

there's also other selector methods available to achieve what you want using >, + and ~ which might work depending on how your content is structured.

There's loads of pros and cons of each method which are worth checking out as sometimes throwing in classes and ids as the selector methods isn't the best way forward.

red_ice · 15-02-2015 11:58pm

To expand on this a little more you should consider what is on the rest of the page and where the element is that you are targeting.

I have to disagree with 'tricky D'. h1 should only be used once, article headers are sub headings, thus h2/3 tags. Those sub headings belong to a 'news' page, which would be the h1. Also working with hundreds of agencies in my time, every marketing / SEO head will pour petrol on you if you have 2+ h1s on a page.

Using a h1, is a bad example. So lets change the example to h2.

h2 can appear a number of times. Just like a p tag.

I'm about to get shot down by nearly every developer that looks at this post as it's probably contradicting what they are saying, I don't mean to offend. Adding a class to any element is frowned upon by me, and any work that my team passes up to me is rebuilt if there are classes on elements... for the most part anyway. There are js reasons, or sometimes over use of elements that will cause you to need to use classes - fair enough. Any class that is used for JS reasons, is mostly there for targeting, and not styling... Ok, a 'selected' class would be an exception, but 90% of classes we use in JS are purely for targeting.

So, why is adding classes bad? It makes for hard to read HTML, classes begin to concatenate in order to override styles on a big site, its harder to work with elements over multiple breakpoints / media queries, there is a massive list. You have a range of tools to use to target elements such as b / i / u / span / strong / :before / :after / :first-child / :first-of-type / :nth-child and so on. Keep in mind, they can be styled. If you want to use 'b' for underline and 'u' for bold fonts you can... its not advisable, but my point is, you should have enough tools at your disposal within standard HTML without needing classes.

Ok, so maybe I'm a bit of a Code Nazi, but hear me out. Which of the two code blocks looks better?

[HTML]
<h2>Some title</h2>
<p>Some content</p>

<h2 class="article">Some title</h2>
<p class="article">Some content</p>
[/HTML]

or

[HTML]
<h2>Some title</h2>
<p>Some content</p>

<article>
<h2>Some title</h2>
<p>Some content</p>
</article>
[/HTML]

The second is obviously better. It illustrates my point. In order to see where classes should be applied to elements on a page you need to consider the whole page first.

Do you have parent elements wrapping the elements you wish to target?
If not can I make a new element, and target the elements within that?

In a nut shell, good HTML has as little classes on it as possible. If I was starting off with HTML/CSS I would strive to master how to style any page by using as little classes as possible.

Now, to go against what I've been preaching. If you have tabular data or a range of different styles within a block or simply no other alternative to use classes. Go nuts.

tricky D · 16-02-2015 1:45pm

red_ice wrote: »

I have to disagree with 'tricky D'. h1 should only be used once, article headers are sub headings, thus h2/3 tags. Those sub headings belong to a 'news' page, which would be the h1. Also working with hundreds of agencies in my time, every marketing / SEO head will pour petrol on you if you have 2+ h1s on a page.

Then they would all be falling for the myth. Both the standard and Google's SEO advice are clear on this. The w3 'standard' even gives an example using multiple h1s [ http://www.w3.org/TR/2012/WD-html5-20121025/single-page.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements ] and Matt Cutts clearly states it's fine to have multiple usages if it makes sense to do so [ https://www.youtube.com/watch?v=GIn5qJKU8VM ] as long as it's not trying to do any sort of con job on Google. A quick search on the topic points to plenty advice that is more recent which backs this up. That said, I'd generally recommend not doing it and use the sort of default method as you describe, unless there's a very good reason to do so and you know exactly what you are doing (which so so many SEO operators don't).

On the rest of your post, I fully agree especially the tendency to just throw classes and ids at tags as a lazy and not thought out solution.

red_ice · 16-02-2015 7:46pm

I read up on this again after. Arguments for both sides of the story, but I'll probably be considering multiple h1s in the future :pac:

CSS Tag Targeting

Comments