Article: https://alistapart.com/article/axiomatic-css-and-lobotomized...
Prev. submissions: https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...
<!--
...
s, . .s
ss, . .. .ss
'SsSs, .. . .sSsS'
sSs'sSs, . . .sSs'sSs
sSs 'sSs, ... .sSs' sSs
sS, 'sSs, .sSs' .Ss
'Ss 'sSs, .sSs' sS'
... sSs ' .sSs' sSs ...
. sSs .sSs' .., sSs .
. .. sS, .sSs' . 'sSs, .Ss . ..
.. . 'Ss .Ss' . 'sSs. '' .. .
. . sSs ' . 'sSs, . .
... .sS.'sSs . .. 'sSs, ...
.sSs' sS, ..... .Ss 'sSs,
.sSs' 'Ss . sS' 'sSs,
.sSs' sSs . sSs 'sSs,
.sSs'____________________________ sSs ______________'sSs,
.sSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS'.Ss SSSSSSSSSSSSSSSSSSSSSs,
... sS'
sSs sSs
sSs sSs
sS, .Ss
'Ss sS'
sSs sSs
sSsSs
sSs
s
YOU ARE YOUR OWN GOD.
YOU HAVE THE POWER TO CHANGE THE WORLD.
MAKE THE MOST OF IT.
-->[1] Really very dark grey on very light grey.
.vertical-stack > :not(:last-child) {
margin-bottom: 8px
}
<div class=“vertical-stack”>
<h1>Heading</h1>
<p>Paragraph</p>
<p>Paragraph</p>
</div>edit: realise this is at the end of the article so you probably already know this
Really enjoyable read and it takes you through the thinking process.
[0] Not recommended for absolute beginners
Must be worth it if web design is your profession.
Except when it isn't superior. Like when the exception is pages of code below the rule.
Which means that precise (enabling) selectors are more robust since you don't have to worry about future CSS additions (or even whether to look for exceptions).
Which means that in general, general rules don't work very well.
gap? Is this new? I've been waiting for years for CSS to finally support something like that. Always thought it was weird that I had to mess with margins (and last-child hacks) to get a proper gap between items in a container.
Edit: just checked, Safari 14.1 added support for using gap with Flexbox.
If you can build something step-by-step with a clear hierarchy and easy to trace causes and effects, the result seems to be more convincing/reliable than a process involving a bunch of logical roundabouts. Of course, if that's at all possible for a problem at hand.
https://ashok-khanna.medium.com/rounded-tables-an-elusive-dr...
Like what?
I assume there's some CSS that doesn't have a use anymore but thinking about layout, we don't need floats for page layout but that was basically a hack, float is still useful for its original purpose.
Basically, the CSS spec isn't full of cruft but there are a lot of CSS practices that are no longer needed.
CSS really does do pretty much everything you need these days.
For example:
.thing { topgap: 10 }
.other { topgap: 10 }
Would have to compile to different things if .thing was in a flexbox and .other was in a grid or a box. Since a lot of HTML is dynamically generated, we don't actually "know" this, and specifying which to use yourself ahead of time defeats the purpose, since you may as well just use the normal CSS properties. This could however work with completely static HTML. Maybe some JavaScript solution could hack on dynamic CSS but I would be sceptical of accessibility and performance in that case.
In the precompiled case, unless all the CSS was outputted using a very limited subset of CSS along with a large "base" CSS file, I don't quite know how it would work.
I hope somebody proves me wrong!
(I use this on my site. It’s suboptimal for build and could use a mountain of refactor. But the source is up on my GH if anyone’s curious)
Anyone else seeing this? Or am I 1) crazy and/or 2) admitting to having some crazy virus on my phone?
But in practice while creating interfaces, we're making broad brush strokes, then accommodating exceptions, like :last-child.
Also curious about how browsers prioritize the render stages – does every style get applied sequentially (hence cascading), or do pseudo selectors get applied later during the paint?
Sounds confused. I'm not sure what "additive styling" means, but I'm sure it doesn't mean the same thing as "additive color". "Kids like jelly beans, so why not lima beans?"
The reason we use additive color on the web is that it reflects the display technology, which is a bunch of independent light emitters. The web has nothing to do with it, except that the web is viewed on computers.
What if you want margin: 5px as the general rule and margin: 10px on the last element. Is 10px a disabling selector?
There might be other rules, browser, user that should not over the 5px rule
- When special cases are added or removed, the general rule won't have to be adjusted, just code that handles the special cases.
- On the other hand, a single general rule that specifically avoids application to multiple exceptional cases will be pretty long and have multiple :not()s, thus reducing readability and maintainability.
Why burden the general rule with knowledge of its exceptions? To me, doing so is a (small) violation of the principle of separation of concerns.
To quote the article referenced in the article: "I call this technique disabling selector since the li:last-child selector disables the previous selector's rule."
So the 10px margin for the last element is a disabling selector.
`initial` isn’t any better than 0 for this sort of purpose. `unset` and `revert` are probably less bad; I’d tend to choose `unset`.
1) rule that does not apply to any element on the page. Such rules only inflate CSS file and waste traffic and CPU cycles to process them
2) rule that is overriden by another rule. Again, it doesn't have any effect on the page and only wastes CPU cycles.
The case 1 happens when styles for all pages are merged into a single file instead of making different bundles for different pages. Both cases happen when using bloated CSS frameworks.
And I think definitely avoid li + li. It wouldn't be immediately obvious at all for me if I saw that, what the intention is.
Nothing unfamiliar is obvious. As with any language, get to know the capabilities of CSS better and it will feel familiar. The article is right that for spacing, the `gap` property on the parent makes more sense but hasn't been around long enough, we need some more older browsers to age out (especially when used with Flexbox).
I've done web for more than 7 years and I still immediately wouldn't recognize why someone has used selectors in such manner (li + li). Just obfuscates things IME.
Not to mention that CSS is essentially platform-specific due to differences between chrome, safari and firefox.
Some tooling is managing the complexity of managing component-centered design (particularly scoping); it's a very positive approach to design but it's not without its problems.
Some tooling is to help developers avoid having to actually learn the CSS language well and/or to force it into JavaScript.
> CSS is essentially platform-specific due to differences between chrome, safari and firefox.
That's an exaggeration. Consistency of implementations between browsers is better than its every been. There are still some vendor-prefixed properties to care about, especially if one is generous in one's support for older browsers, but that's another reason CSS tooling exists, to write only standard CSS and let the tool fill in the older variants.
I legitimately can't think of anything that has made it more difficult to write by hand in the last 15 or so years; if anything it's never been easier! Building complex software is...complex, and frameworks and tools in the CSS world are no different than reaching for an MVC framework or ORM.
There's minor quirks between browsers, but it's a far cry from being platform-specific, and a huge improvement on the incompatibilities of yore.
I do a lot of visual work as a designer/developer. If it weren't for the obvious accessibility caveats such as basic page structure, I'd be making at least 20% of the pages I code in straight SVG.
Edit: Maybe not HTML5 I guess... you can make anything inscrutable if you try.
We do this at my current job and it's honestly the easiest time I've ever had with CSS.
cards.map((card, i) => {
const isLast = i === cards.length - 1
const className = "card" + isLast ? '' : 'card-margin'
return <Card className={className} />
The nice thing about this is you have a full programming language at your fingertips. You could do something with every even card, ever prime number card, etc.
* Add margins to the top and left.
* Add padding to the parent container's right and bottom.
You'll have perfect spacing every single time.
The solution is the same. `:nth-child(3n)` selects every third so you add the :not(:last-of-child) to the end to prevent it from being matched by the rule.
.card:nth-child(3n):not(:last-of-child) {
/* styles for every third card, not the last card */
}