Question about Trib Project

I’ve looked at some of the Trib projects and noticed the coders do not assigning any styling to their id’s but create a class with the same name and apply the styling to it.

Is this how to do it? Personality, I think it’s creating a lot more unnecessary work.

Hello,
It depends; a class selector can be applied to many elements on a single page, while the ID selector can only be applied on one as there should only be ONE element with a particular ID.

I create the following class:

.red {
font-size: 22px;
color: red;
}

I can apply that to any and all elements if I wanted to. Classes are very flexible. That is much less work than writing multiple ID selectors with the same code inside.

I guess I didn’t make myself clear in my previous question.

What I notice is that some people in their html will put in id attribute but not assign any styling to it and then create a class with the same name as the id (the required ones from the stories list) and apply styling to it. When applying the id and class to an element, they will list them both and only one has any styling. The class is redundant; just include the styling with the id unless it will be used again.

It’s good practice to apply styles to classes rather than ids because it’s often hard to predict in advance which styles you will need to reuse as your project grows. And beyond that it’s usually a good idea to further break apart classes with many style rules into simple reusable class based on functionality using a naming convention like BEM, which will prevent the CSS from growing out of control in larger projects.

Okay, now I’ve looked at the tribute project page. Please provide links to pages, the Tribute Project, that may be important so that answers are as efficient as possible.

The IDs pass the tests. The reason for using classes is as I mentioned before and @DouglasDev just did. Secondly, you many not even use IDs at all if there is no intention of using them for CSS or javaScript listeners for example.

@wesmarsh
I general, IDs are typically used when you want to target HTML elements with Javascript. Classes are used to style the page. You can use IDs to style the page if you want but the have more weight than classes do and the ID will override a class targeting the same element. In your own personal projects that you create outside of Freecodecamp some people recommend using only classes to style your page and IDs if you want to use Javascript in your project. However, Javascript can target classes too, so you may not need IDs that much at all in your personal projects.

In an element you can specify multiple classes like this.

<button class="btn">submit</button>
<button class="btn btn--danger">delete</button>
<button class="btn btn--success btn--large">sign up</button>
.btn {
    height: 50px;
    width: 100px;
    padding: .5rem;
}
.btn--danger {
    background-color: red;
}
.btn--success {
    background-color: dodgerblue;
}
.btn--large {
    padding: 1rem;
}

For the Freecodecamp projects you will need both IDs and classes.