Dasmoto: Classes or IDs for the h2?

system3729675489 · November 22, 2019, 12:11am

https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/build-websites-on-your-own-computer/modules/local-website-development/projects/dasmoto

Hi Everybody!

First of all: This is my first post in this forum so if it is in the wrong place please forgive me.

I did finish the project and everything works fine. I did find one difference between my code and the solution where I am not totally convinced yet that the solution makes more sense. Maybe you can share your views with me.

I am talking about the 3 h2 elements. According to the given specs the only difference between them were the different background colours so I chose to code the following way:

HTML:

<body>
        <h1>...</h1>
        
        <div>       <!-- First Section -->   
            <h2 class="mediumspringgreen">Brushes</h2>
            <img src="./.../.../....jpeg">
            <h3>...</h3>
            <p>...</p>
        </div>
        
        <div>       <!-- Second Section -->
            <h2 class="lightcoral">Frames</h2>
            <img src="./.../.../....jpeg">
            <h3>...</h3>
            <p>...</p>        </div>
        
        <div>       <!-- Third Section -->
            <h2 class="skyblue">Paint</h2>
            <img src="./.../.../....jpeg">
            <h3>...</h3>
            <p>...</p>
            </p>
        </div>

    </body>

The solution however looks like this:

HTML:

<body>

  <h1>.../h1>

  <!-- Brushes Section -->

  <div class="item">
     <h2 id="brush">Brushes</h2>
     <img src="./.../.../....jpeg">
     <h3>...</h3>
     <p>...</p>
  </div>

  <!-- Frames Section -->

  <div class="item">
    <h2 id="frame">Frames</h2>
    <img src="./.../.../....jpeg">
     <h3>...</h3>
     <p>...</p>
  </div>

  <!-- Paint Section -->

  <div class="item">
    <h2 id="paint">Paint</h2>
    <img src="./.../.../....jpeg">
     <h3>...</h3>
     <p>...</p>
  </div>

</body>

After comparing those I still felt that my way makes more sense. It allowed me to add all the attributes the 3 h2-elements share to one h2 tag in the css file and then (also in the css) just add the attribute of color to each of the classes whereas the solution code required to set up 3 different ids that are almost similar to each other which overall seemed too laborious to me.

What do you think? I hope I made my question understandable and look forward to your feedback.

Thanks,
Paul

mtf · November 22, 2019, 12:22am

The nice thing about classes is they are reusable throughout the document. ID is single use, only, and a bit much to assign just an element for the sake of colour.

What you could do is assign an id to each section div, That will leave the door open for all manner of styling and script behavior.

<div id="brushes">
    
</div>

#brushes h2 { color: mediumspringgreen; }

system3729675489 · November 22, 2019, 12:51am

Thanks, that is something i did not think of.

However, from what I learned so far I was under the impression that you want to avoid using id if possible. I guess the benefit of id comes into play with more complex code when you want to make sure that an element stays the same and does not get changed because of competing rules/attributes. Would you agree?

mtf · November 22, 2019, 1:51am

Generally speaking, yes. There will definitely not be any competing rules with id="brushes". That selector has high specificity so any rulesets under the umbrella (descendents) will be practically unassailable.

It also means we have a future friendly component that can be uniquely identified making it easier to perform updates and tweak styles. When the world of the DOM becomes your playground, you’ll use ID as a way of hooking DOM nodes to control screen real estate.

Bottom line, an element with an ID is best viewed as a parent. It will contain possibly many elements (children) and has complete sway over them all.

system3729675489 · November 22, 2019, 1:38pm

Allright, thanks for elaborating!