Things I wish I’d known about CSS (cssfordesigners.com)

Article summary

The article discusses the author's journey of learning CSS and the things they wish they had known earlier, such as the differences between block, inline, and inline-block elements, how height and width are calculated, and the importance of using relative units. The author shares their experiences and provides examples to illustrate key concepts. The article aims to help others avoid common pitfalls and improve their understanding of CSS. By sharing their knowledge, the author hopes to make CSS more accessible to newcomers.

Main themes

• CSS fundamentals
• layout and design
• relative units
• browser compatibility
• CSS evolution
• frameworks and complexity

What commenters say

• Using relative units like em and rem is beneficial for creating flexible and scalable designs, but can also add complexity to the layout.
• Flexbox is a powerful tool for layout, but its support in older browsers like IE11 can be problematic.
• The evolution of CSS has made it easier to create responsive and mobile-friendly designs, but has also introduced new complexities and nuances.
• Some developers prefer to use pixels for layout, as relative units can cause unintended changes to the design when the font size is changed.
• The use of CSS frameworks like Tailwind can simplify the design process, but can also lead to 'class soup' and overly complex HTML.
• Understanding the box model, specificity, and selectors is crucial for writing efficient and effective CSS.
• The ch unit can be useful for setting widths based on character count, but its value is not always exact and can vary depending on the font used.