Flexbox vs CSS Grid and the ‘Gotchas’
- Describe one thing you learned in class today.
Flexbox and CSS Grid are most effectively used together rather than in place of each other. CSS Grid focuses on two-dimensional spacing while Flexbox is used for one-dimensional spacing. One dimension display through Flexbox can be vertical or horizontal. Choosing only one or the other to deploy through your code is limiting.
2. Describe your choice of two pseudo-selectors and discuss what they are used for.
Two pseudo-selectors I’d like to discuss, which I think will be used often in my code, are :first-child and :hover. :first child, for an example involving many paragraphs using <p>, will add specific CSS to only the first <p> element. This is helpful because formatting for a specific <p> element for the first paragraph will need to be manually changed if a different paragraph needs to be placed above the first paragraph. The pseudo selector will automatically retarget the new paragraph with the CSS formatting.
The second is :hover which is a dynamic pseudo-selector. I like this one because it is more interactive with a user. It makes the user feel like there’s more intelligence behind the page they are viewing. It’s also beneficial because it is not limiting to a single element and can be applied to many with very little code.
3. What are some of the ‘gotchas’ for writing efficient CSS?
Most of the answers I’ve found through research refer to keeping code efficient, using proper spacing, avoiding key selectors that match a lot of elements, using Class and ID selectors instead of tag selectors, avoiding universal selectors altogether, and avoiding redundant selectors (again, just keeping the code efficient and easy for a team to read).