mobile first workflow using CSS

Community feedback

• 

  Anthony Braund•110

  @abraundPosted over 1 year ago

  Question 1) In your css I note you have set the color & font-weight for all of your header tags. There is nothing stopping your selecting those elements again. i.e. you can additionally have:

  h1 {
  font-size: 20px;
  }
  
  h4 {
  font-size: 18x;
  }
  

  Multiple selections of the same element (or class, or id) will only cause a problem if they aim to set the same css property (in which case specificity and order declaration will decide which value wins).

  Question 2) Yes you can select by section. In your example you are selecting by an #id selector, which has the highest specificity. So it's hard to affect any change in your exact solution by going section {color: red;} for example. Something like section {margin: 400px;} will cause a scroll-box.

  Although you could select by <section>, it is better to select by class (sometimes id) and not by elements. Consider a larger site (which this page will be part of), general elements will be re-used heavily. On different pages <main>, <section>s, etc., will have different styling requirements. Thus it's better to have <section class="payment-plan">. This also helps your CSS readability, if you select by the CSS class .payment-plan then it's easy to imagine what it's influencing in the HTML. If in the CSS you select by section, well that's hardly descriptive, it could be anything.

  1