From 18caefea3d33b49f101628b4d2c026da7858e149 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 23 Mar 2023 00:23:42 +0000 Subject: [PATCH] daily-email: add 2023-03-22 --- src/daily-emails/2023-03-22.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/daily-emails/2023-03-22.md diff --git a/src/daily-emails/2023-03-22.md b/src/daily-emails/2023-03-22.md new file mode 100644 index 000000000..bbc5f4aa9 --- /dev/null +++ b/src/daily-emails/2023-03-22.md @@ -0,0 +1,20 @@ +--- +title: > + With utility styles, your CSS stops growing +pubDate: 2023-03-22 +permalink: > + archive/2023/03/22/with-utility-styles,-your-css-stops-growing +tags: + - css + - tailwind-css +--- + +When working with traditional CSS, the first thing you do when you need to style a new page or component is to open a stylesheet and start writing new CSS. + +Also when editing existing styles, sometimes you'll write new styles to avoid breaking the existing pages in unexpected ways in other parts of the page. This is why I've not seen many projects where the styling is maintained or refactored over time - only added to. + +By writing new CSS for every new page or component, the size of your stylesheets will continue to grow and be less performant and harder to maintain over time. + +With utility styles and frameworks like Tailwind CSS, this happens a lot less or sometimes not at all. + +If you need to use a class like `flex` or `grid` and you already use that in your project, there's no new CSS to add and the stylesheet doesn't grow. Because these type of classes are so specific, they're much more reusable which means less duplication of CSS rules and less CSS in total.