This One Thing Causes Most CSS Issues! (learn how to avoid it)

In this video, I discuss a common issue where engineers unintentionally "do too much," leading to problems in CSS. We review several examples, starting with a common method to center content using CSS shorthand. This technique often sets vertical margins to zero, which can cause problems if other rules need to apply vertical margins to that element. Next, we examine the "background" shorthand property, which might accidentally remove properties like "background-image." We also cover the issue of creating overly broad rules that apply styles to unintended elements—another case of "doing too much." We explore solutions for these issues, such as using longhand properties, more precise targeting with CSS selectors, or using backend logic to assign specific utility classes. This ensures that styles are applied correctly without unintended effects. The main point is to be more deliberate with the styles you write. Avoid complicating CSS with shorthand and broad declarations that could impact more elements than intended. Watch the video to learn more! CodePen from the video: https://codepen.io/dmtrmrv/pen/dyLxPBw Chapters: 00:00 – Introduction 00:12 – Example #1: Centering Content Horizontally 00:48 – Why This Shorthand Is Problematic 02:13 – Better Alternatives 02:30 – Not All Shorthands Are Harmful 02:50 – Example #2: The Background Issue 03:06 – Potential Problems with This Shorthand 04:13 – Recommended Alternatives 04:22 – Example #3: Beyond Shorthands 04:46 – Exploring Potential Downsides 05:22 – Alternative Solution #1 06:29 – Alternative Solution #2: Still "Too Much" 06:47 – Alternative Solution #3: A More Effective Approach 08:04 – Alternative Solution #4: Using a Utility Class 08:42 – Conclusion Get updates about new videos in your inbox → https://tinyurl.com/yuu8x8my Follow me on Twitter:   / dmtrmrv