DEV Community

Discussion on: What makes CSS so hard?

View post
Collapse
 
adamdsherman profile image
AdamDSherman • • Edited

In my opinion:

  • Usually many avenues to achieve the same result
  • Inheritance (elements inheriting styles from other elements)
  • Multiple views (mobile, tablet, desktop)
  • Many, many styles to remember
  • Multiple libraries can muddy the water

Here's my tips for working with CSS:

  • Use your browser's inspector to test solutions quickly on the fly
  • Don't forget to use the "Computed" tab in the Inspector to track down specific styles.
  • Get to know BEM and SASS (and/or LESS).
  • Avoid using IDs as much as you can.
  • Avoid going too deep with style inheritance.
  • Avoid being to specific with your classes. Eg dont have a contact-form-send-button class. Have a button--submit class instead.
  • If you're using classes as identifiers for Javascript, do not have them share CSS styles. Eg for classes that are connected to a Javascript function I append them with js- eg : js-close-btn.
  • Always style for mobile first
  • Don't place media queries in the middle of your classes. Have medium, large etc styles grouped in their own media queries further down on the 1 file. Aim to have only 1 media query for each size per file.