An experiment in cleaning up CSS by just avoiding dis-features and focusing on flexbox and CSS grids.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
fsckcss/src/Home.svelte

129 lines
6.2 KiB

<script>
import {link} from 'svelte-spa-router';
import Icon from './components/Icon.svelte';
</script>
<style>
hero {
display: block;
padding: 3rem;
background-color: var(--color-bg-secondary);
}
hero h1 {
font-size: 3rem;
}
aside a {
--text-decoration: underline;
}
rationale {
display: flex;
flex-direction: column;
font-size: 1.5em;
padding-left: 4rem;
padding-right: 4rem;
}
</style>
<hero>
<h1>fsck CSS</h1>
<p>An experiment in cleaning up CSS and HTML with modern tools like <b>flexbox</b> and <b>grids</b>.</p>
</hero>
<hr>
<section>
<aside>
<h3>Remove Classes</h3>
<Icon name="code" size="64" />
<p>Using a classless style like <a href="https://andybrewer.github.io/mvp/">MVP.css</a>, you
bring back CSS specificity to its original intent.</p>
</aside>
<aside>
<h3>Add Flexbox</h3>
<Icon name="box" size="64" />
<p>Using <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">flexbox</a> you can layout anything you want without tons of divs.</p>
</aside>
<aside>
<h3>Modify with Variables</h3>
<Icon name="sliders" size="64" />
<p>Using CSS variables you can replace many uses of classes and ids, avoiding most specificity
issues. Try the dark mode button below.
</p>
</aside>
</section>
<rationale>
<section>
<h1>Cleaner CSS</h1>
</section>
<p>This website is nothing more than a set of small demos for the idea of
using flexbox and grids to clean up and simplify CSS. Most everything else
about CSS stays. Filters, transforms, attributes, and everything that
applies to the visual display of the components of a design. What gets
removed is <b>div</b> heavy, class heavy, not-semantic-at-all layout
systems cluttering the real information available through simple HTML
tags.</p>
<p>In short, if you're writing this:</p>
<section>
<aside>
<pre>
&lt;div class="grid col-1">
&lt;div class="card">
...
&lt;/div>
&lt;/div>
</pre>
</aside>
</section>
<p>You could write this if you use flexbox, grids, and variables:</p>
<section>
<aside>
<pre>
&lt;card>
...
&lt;/card>
</pre>
</aside>
</section>
<hr>
<section>
<p>I demonstrate the idea with a series of copies of existing websites and other layout problems
people frequently encounter. If you have a suggested layout challenge for me, then tell me on Twitter <a href="https://twitter.com/lzsthw">@lzsthw</a> and I'll give it a shot.
</p>
<a href="/demos" use:link><button>View The Demos</button></a>
</section>
<hr>
<h1>What's wrong with classes?</h1>
<p>There's nothing wrong with classes in CSS. How they're used in recent CSS subverts the normal specificity rules making CSS unecessarily difficult. The original specificity rules put the base design of a component at the tag level, then a <b>class</b> can be used to modify and extend the design, and an <b>id</b> can make this even more specific. In today's use of <b>div.class</b> heavy markup you lose this ability to alter the design as needed where its used, and instead you have to resort to <b>!important</b> and specificity hacking to change how something looks, or add more <b>div</b> with more <b>class</b>.</p>
<p>The other problem with <b>div.class</b> is it's more difficult to debug problems with the layout. Because you're relying on specificity that can come from anywhere in the cascade it's much more difficult to find exactly <b>what</b> bit of CSS is overriding your local decisions. If you've ever had to open the inspector in your browser to troll through CSS locations looking for the culprit then that's why. If the base design decisions are at the tag level, then your local <b>class</b> and <b>id</b> specifics will work as expected. You can also replace many uses of class as design modifiers with scoped CSS variables and reduce the use of <b>div.class</b> even further.</p>
<p>Finally, using <b>div.class</b> heavy layout systems polutes your markup with structure that's difficult to maintain and change over time. When you focus on using <b>truly</b> semantic named tags and follow specificity as intended then your HTML is lighter and easier to understand because it isn't full of <b>div.grid.col-1.col-mx-auto</b> class rules that really have nothing to do with the actual meaning of that particular visual element. With <b>flexbox</b> and <b>CSS grids</b> you don't need any layout divs, and can keep the HTML clean and semantic. This also ends up being more flexible with less or the same effort as using a pre-made grid system full of divs.</p>
<h1>Should we ban div.class?</h1>
<p>Hell no. The current problem of <b>too much</b> class based CSS is because of trends in recent years calling for everyone to irrationally ban some practice. Remember when everyone decided tables were evil? So then we banned tables and <b>grids</b> completely? Then nobody could do a layout without crazy tricks and JavaScript? Nobody wants a repeat of the anti-tables "semantic markup" war, so please don't ban div.class.</p>
<p>All this website does is demonstrate that you don't need <b>so much div.class</b>. You can scrap a lot of what you're using now to do layout and go with clean easy to read HTML that has a nicer flat structure and is easy to maintain, then judiciously add in any extra things you find you need like <b>div.class</b>. Treat <b>div.class</b> like salt. Right now you're pouring a whole box of it on your HTML when a little bit makes it taste better.</p>
<h1>How did it get like this?</h1>
<p>Before flexbox and CSS grids there really was no choice but to use <b>div.class</b> to make grids for layout. Since everyone in the CSS design world irrationally banned tables as a layout mechanism your only choice was to invent another table but call it <b>div.grid.col-1</b>.</p>
<p>Today we don't have to use divs for layout anymore. It's entirely possible to use flexbox and CSS grids to solve many layout problems, and to do it without too many irrelevant alterations to the meaningful HTML. You no longer have to wrap an <b>img</b> with 5 <b>div</b> tags just to overlay it on a background. You can write the <b>img</b>, maybe a <b>figure</b> and then use CSS to do anything you want to it.</p>
</rationale>