3 ms·

That quickly falls apart when I add an mb-2 to a Thingy, but fail to check that Thingy is also used inside SideThings (which we all forgot existed at all) wich

by berkes 3y ago

That quickly falls apart when I add an mb-2 to a Thingy, but fail to check that Thingy is also used inside SideThings (which we all forgot existed at all) wich already has whitespace (but somehow uses mt-2 because the developer preferred to declare intermediate whitespace at the top instead of the bottom). So when the communication dept calls me on friday, I add quickly add an #main div.nth-child(2).mb-2 { margin-bottom: 0 !important } to overrides.css and call it a day. Point being: manually sprinkling mb-2s throughout your codebase is a recipe for disaster: an sure way to an unmaintainable frontend.

earthnail 3y ago
Until someone else edits your code and doesn't understand why the layout suddenly broke. nth-child(2) is very prone to this.
- kaba0 3y ago
  Or worse, it breaks at a completely different site you didn’t even touch, won’t notice and might also pass through manual testing (if that’s even a thing at your place), and end up in prod. Sure, there are AI-based testing tools that check for frontend changes, but let’s be honest, they are very rarely used, if at all.
- berkes 3y ago
  Yes. My point was that to "fix" a scattering of .mb-2 going astray, we often pull out even worse solutions. Making the software as a whole worse.
  - quickthrower2 3y ago
    Hacks like this exist in non-tailwind projects where the classes have lost all meaning and the CSS is in a messy state. On the other hand, in tailwind you could organize things well using your template/component system, be that ReactJS, Vue, ERB, EJS, CSHTML etc. I agree there is subtlety though. A well organized and "benevolent dictator-ed" crop of CSS files is going to be more powerful than it's Tailwind equivalent due to having selectors etc. available.
egeozcan 3y ago
> #main div.nth-child(2).mb-2 { margin-bottom: 0 !important } to overrides.css and call it a day And then 100 times doing the same later... We all know how it ends up looking because we all did it.

by berkes 3y ago

earthnail 3y ago

Until someone else edits your code and doesn't understand why the layout suddenly broke. nth-child(2) is very prone to this.

kaba0 3y ago
Or worse, it breaks at a completely different site you didn’t even touch, won’t notice and might also pass through manual testing (if that’s even a thing at your place), and end up in prod. Sure, there are AI-based testing tools that check for frontend changes, but let’s be honest, they are very rarely used, if at all.
berkes 3y ago
Yes. My point was that to "fix" a scattering of .mb-2 going astray, we often pull out even worse solutions. Making the software as a whole worse.
- quickthrower2 3y ago
  Hacks like this exist in non-tailwind projects where the classes have lost all meaning and the CSS is in a messy state. On the other hand, in tailwind you could organize things well using your template/component system, be that ReactJS, Vue, ERB, EJS, CSHTML etc. I agree there is subtlety though. A well organized and "benevolent dictator-ed" crop of CSS files is going to be more powerful than it's Tailwind equivalent due to having selectors etc. available.

egeozcan 3y ago

> #main div.nth-child(2).mb-2 { margin-bottom: 0 !important } to overrides.css and call it a day And then 100 times doing the same later... We all know how it ends up looking because we all did it.