HTML, CSS

Community feedback

• 

  Ben Andrew Merritt•345

  @b-a-merrittPosted about 3 years ago

  Hey Rachel!

  I'll answer your question broadly, because I think there are circumstances when it would be necessary to use that many selectors. I think a deeper understanding of how CSS is parsed would benefit you.

  Browsers construct a CSS Object Model (like the DOM) starting with the selectors on the right and then working left. Single selectors will be nearest the root while more specific selectors will be further down the branches. For example, on line 77 of your stylesheet, the selector .container .card h1 span is parsed like this:

  1. The browser finds all span elements
  2. Of those, the browser creates a branch that also have h1 selectors
  3. Of those, the browser creates another branch for those that have the card class
  4. Finally, another branch is made for those that have the container class

  I'm sure you've guessed it by now -- the best practice is to limit how many times the browser has to do this. When using selectors, use as many as are needed to grab just that one (or those ones). In your project, you have only one span on the entire page. You could have just said

      span {
        --var(S-violet)
      }
  

  If chaining selectors, consider having the more specific on the right and the least specific on the left. That way, the browser doesn't have to gather up all the <p> elements before finding the one #identifier.

  Note: Don't look at my work for an example on how best to do this! I'm the epitome of hypocrisy.

  Additionally, you used a div with the class container right below main. Perhaps consider just using main? Semantic HTML elements like main or section can be selected just as easily, if not easier. You could delete that div and change all CSS selectors to main instead.

  Anyway, the result looks good! Good job

  Marked as helpful

  2

  ---

  

  Rachel Mozzetta•135

  @Mozzarella-chzPosted about 3 years ago

  @b-a-merritt

  Thanks for the reply. So from a little bit of digging on forums I found that if a selector looks like X Y Z A B.error{} then the reason that is not good is because it is 'heavy' and will slow down the browser as it loads the page. And it's just time consuming/unnecessary to write out that much code. And so the rule of thumb for descendant selectors is to have just 2 selectors identified if possible? The ancestor and descendent?

  You really sent me on a hunt with this one. I really feel like I learned a lot and expanded into new learning!

  And your last point about my container and main divs is the exact thing i pointed out to someone on their code as being redundant. Ha! The hypocrisy carries on.

  Thanks again for your feedback!!!

  0