CSS for those who want to get better quickly

css-get-better-quickly.md

CSS for those who want to get better quickly

START HERE for an overview of CSS language features.

How do you write css? What does the @ symbol mean? How do you use css functions? In general, MDN is always an excellent resource and makes up the majority of the links on this page.

How to debug CSS
Summary: Right click on an element in a web page and click "Inspect”
This is here at the top because it’s so important but it’s not in a lot of tutorials.

---

From here on out we're going to skip the basics. Instead, we're going to talk about things that can suck up all your time when styling a website so you can avoid common pitfalls.

Hardest problems we deal with day-to-day

• Positioning / sizing content correctly:
  • How do you center text vertically in a div? How do you make two columns side by side? Why is the margin property not working? How do you move a button to the top right without affecting all your other content? Understanding this is, in my opinion, the key to feeling comfortable with CSS. Check out the link above, but this really deserves its own talk.
• Responsive design when resizing pages:
  • How do you make the page look good on both wide-screen monitors and phones? Short answer: @media lets you write CSS based on browser width, and display: none lets you hide entire sections of the page. It takes a lot of tweaking to get things right but is critical to keep your site from looking broken for half the people using it.
• Overlapping elements:
  • Why is my header overlapping some content but not others? Why is my image obscuring my text? We use z-index to set which elements are on top, but this can be affected by so many properties -- position, display, opacity, transform, plus properties of the parent html element... it's kind of a mess.
• Browser inconsistencies (including mobile):
  • Why is my video showing up in Chrome but not on iPhone? Why is my textbox one pixel to the left in Firefox? Every browser is slightly different and it's a huge pain to get things to look the same in all of them. Sometimes a browser has a new feature that isn't available in another one, and some browsers don't even follow proper CSS standards. Even worse, browsers can have bugs. You now have to deal with problems that may happen in one browser, but when you fix them for that one it breaks the others. There are some hacks that let you write css that only affects one browser or browser version, but they are not pretty. Outside of googling the issue there's no help for this one, sorry.
• Accessibility vs. speed of development:
  • Accessibility is important! But when you’re on a deadline, how much time do you spend learning it, and how far do you go to make things perfect?
• Many ways to do the same thing:
  • It can be really hard to learn best practices for any language. Read guides, watch what other developers do, and adapt techniques to your own needs and the needs of your project.

Smaller, non-intuitive things:

• display vs. position:
  • display api: Affects how the element interacts with neighbors within the existing page flow. Also determines page flow of children. Focus on learning flex, block, inline, none, and grid.
  • position api: Allows element to ignore existing page flow. Focus on learning absolute, relative, and sticky.
    • Word of warning: position affects child elements in a weird way, especially when children have a z-index or are position: absolute. See “Overlapping elements” above.
• margin collapsing:
  • Example: When paragraphs are next to each other, their margins magically overlap.
• specificity:
  • Which selectors override others?
  • Strongest to weakest:
    • !important (do not use this!)
    • id (#overview-section)
    • classname (.sidebar)
    • type (div)
  • Multiple selectors are stronger than a single selector of the same type.
• inheritance:
  • Some properties like font are inherited from a parent element while others like border are not. List of inherited properties

In our work:

• We use display: flex a lot! The best guide ever
• We generally stick to selecting by a single classname rather than id or element type
  • This prevents our CSS from bleeding into other areas of the site
  • It’s more consistent
  • Using only one class avoids specificity escalation
• We use variables to help keep track of colors, z-index, and font sizes.
• We combine css variables with @media queries so our fonts automatically becomes smaller on small screens. It's so good.
• We write css for each react component separately to stay organized
• We write css in a separate file rather than using inline styles (styling written in the html directly)
  • There is no community consensus around this, but we prefer it because it keeps the files shorter.
• We use BEM syntax (roughly) for our classnames
• Our css properties for each element are sorted according to this list