<!DOCTYPE html>
<html>
<head>
<style>html,body,table { line-height:1.5; } body { margin:0;padding:0; } h1,h2,h3,h4,h5,h6 { font-weight:bold;font-style:normal;font-size:1em;margin:0; } h2 { margin:1em 0; } h3 { margin:1em 0; } h5 { font-style:italic; } h6 { font-weight:normal;font-style:italic; } p,ol,ul,figure,blockquote,.spaced-block { margin:1em 0; } img { border:0;height:auto;line-height:100%;outline:none;-webkit-text-decoration:none;text-decoration:none; } body,table,td,a { -webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; } table,td { border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt; } table td { vertical-align:top; } img { -ms-interpolation-mode:bicubic;max-width:100%; } * { -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } hr { margin:36px 0;border:0;height:1px;background:#eee; } ul,ol { margin-left:1em;padding:0;list-style-position:outside; } ol ol,ul ul,ol ul,ul ol { padding:0 0 0 1em; } li { padding:0 0 0 1em;margin:0 0 0 1em; } .email-button { border:0 none; } .built-with { width:100%;max-width:640px;margin-left:auto;margin-right:auto; } </style>
<style>.ck-link { text-decoration: underline; }</style>
<style>.ck-link { text-decoration: underline; }</style>
<style>@media only screen and (max-width:600px) { .email-container { padding:0 !important; } }
@media only screen { .email * { word-break: break-word; } }
@media screen and (max-width: 384px) { .mail-message-content { width: 414px !important; } }
@media only screen { .email * { word-break: break-word; } }
@media screen and (max-width: 384px) { .mail-message-content { width: 414px !important; } }
@media only screen and (max-width:600px) { .ck-padding-left-none { padding-left:0px !important; } .ck-padding-right-none { padding-right:0px !important; } .ck-padding-left-mobile-friendly { padding-left:18px !important; } .ck-padding-right-mobile-friendly { padding-right:18px !important; } }
@media only screen and (max-width:600px) { .ck-mobile-font-size { font-size:50px !important; } }
@media only screen and (max-width:600px) { .ck-mobile-font-size { font-size:50px !important; } }</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div style="background-color:#ffffff"><table role="presentation" cellpadding="0" cellspacing="0" class="email" style="background:#ffffff !important;width:100%" bgcolor="#ffffff"><tbody><tr>
<td><div class="email-container normal" style="padding-top:0;padding-left:0;padding-bottom:30px;padding-right:0;margin:0 auto;max-width:100%"><table cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="width:100%;margin:0 auto;background-color:#ffffff"><tbody><tr><td>
<div class="ck-section" style="margin:30px auto 7px auto"><center>
<table cellpadding="0" cellspacing="0" style="width:100%;margin:0 auto;max-width:640px"><tbody><tr>
<td contenteditable="false"></td>
<td width="640" style="border-radius:0px;box-sizing:border-box;mso-padding-alt:0px 4px 0px 4px"><div class="ck-inner-section ck-padding-left-mobile-friendly ck-padding-right-mobile-friendly" style="padding:0px 4px 0px 4px"><div style="margin-left:auto;margin-right:auto">
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Hello my front-end friend,</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">A couple of days ago, I talked about how CSS is designed for uncertainty, meant to adapt to unknowns. When we don’t think about it that way, we fight it.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class=""><strong>And when we fight it, things get messy fast.</strong></p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">We add what seems like an innocent enough property, but it doesn't quite fix things the way we wanted, so we add another. Then another. Then another.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">By the end of it, somehow, everything is worse than when we started.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Once again, there's a meme that does a good job of showing how this often goes.</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="text-align:center;table-layout:fixed;float:none" class="email-image"><tbody><tr><td align="center"><figure style="margin-top:12px;margin-bottom:12px;margin-left:0;margin-right:0;max-width:640px;width:100%"><div style="display:block"><img src="https://embed.filekitcdn.com/e/2FGnzMxCkLji5nfXx8Zaar/3M9z752waRAqii47W6rL4i/email" alt="Peter Griffin trying to lower venetian blinds, but he progressively gets more and more frustrated as everything he tries just makes things worse, before he rips them off the wall entirely. CSS in bold letters at the bottom, indicating this is how people feel when writing it." width="640" height="auto" style="display:block;border-radius:4px 4px 4px 4px;width:640px;height:auto;object-fit:contain"></div>
<figcaption style="text-align:center;display:none"></figcaption></figure></td></tr></tbody></table>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">This happens to all of us because it’s easy to get stuck in the “oh, this will fix it!” trap, but each fix needs another one on top of it. It’s like piling Band-Aids on top of one another while the bleeding just continues to get worse underneath them all.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">And these days, a lot of people turn to AI when this starts happening. But <strong>AI tends to fight CSS the exact same way you do</strong>. We tell it we have something that isn’t working, and it adds a property or two. They don’t work, so we tell it to try again.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">After apologizing, the AI tells us it now clearly sees the solution to the problem, only for it to mess it up again, apologize when we tell it it's wrong, and the cycle continues.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Whether we’re writing the CSS ourselves, throwing utility classes at things, or trying to prompt our way to a solution, we’re simply getting frustrated and often ending up with fragile, hard-to-maintain code.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">From my experience,<strong> the root of the problem is that</strong> <strong>most people don’t stop to think about </strong><strong><em>why</em></strong><strong> something isn’t working</strong>. They jump straight to trying to fix it without understanding what’s actually going on.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">When you don’t understand the problem, your fixes are just guesses. </p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">The way out isn’t more properties, more utility classes, or more prompting. <strong>It’s a different way of thinking about CSS entirely.</strong></p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">And that shift is exactly what I stumbled into years ago, pretty much by accident. This email has gone on long enough, though, so I'll be back tomorrow with that 😊.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Cheers, <br>Kevin</p>
<div>
<table cellpadding="0" cellspacing="0" style="width:100%;margin:0 auto"><tbody><tr><td><p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">P.S. I’ll be in your inbox quite a bit over the next week or so. If that’s not for you and you’d like to just get my regular Sunday emails, <a href="https://b59b20d1.click.convertkit-mail4.com/mvupn9e8e2u5hq5l7vdcmhr2oe74kb3hrxm3/dphw37ldh0he6rm4pqhl/aHR0cHM6Ly93d3cua2V2aW5wb3dlbGwuY28vdXBkYXRlZC8=" trigger-id="5625201" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1843417639">click here to opt out of these extra emails</a>.</p></td></tr></tbody></table></div>
<hr style="margin-top:48px;margin-bottom:48px">
</div></div></td>
<td contenteditable="false"></td>
</tr></tbody></table>
<div><!--[if mso]><br /><br /><![endif]--></div>
</center></div>
<div class="ck-section" style="margin:0px auto 24px auto"><center>
<table cellpadding="0" cellspacing="0" style="width:100%;margin:0 auto;max-width:640px"><tbody><tr>
<td contenteditable="false"></td>
<td width="640" style="background-color:#f7f7f7;border-radius:0px;box-sizing:border-box;mso-padding-alt:18px 18px 18px 18px" bgcolor="#f7f7f7"><div class="ck-inner-section ck-padding-left-mobile-friendly ck-padding-right-mobile-friendly" style="padding:18px 18px 18px 18px"><div style="margin-left:auto;margin-right:auto;max-width:640px"><p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:15px;color:#747474;font-weight:400;line-height:1.5" class=""><a href="https://b59b20d1.unsubscribe.convertkit-mail4.com/mvupn9e8e2u5hq5l7vdcmhr2oe74kb3hrxm3" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#006df2">Unsubscribe</a> · <a href="https://preferences.convertkit-mail4.com/mvupn9e8e2u5hq5l7vdcmhr2oe74kb3hrxm3" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#006df2">Preferences</a><br>600 1st Ave, Ste 330 PMB 92768, Seattle, WA 98104-2246</p></div></div></td>
<td contenteditable="false"></td>
</tr></tbody></table>
<div><!--[if mso]><br /><br /><![endif]--></div>
</center></div>
</td></tr></tbody></table></div></td>
<td></td>
</tr></tbody></table></div>
<!-- -->
<img src="https://b59b20d1.open.convertkit-mail4.com/mvupn9e8e2u5hq5l7vdcmhr2oe74kb3hrxm3" alt="" style="display:block">
</body>
</html>