You want enabling CSS selectors, not disabling ones(css-tricks.com) |
You want enabling CSS selectors, not disabling ones(css-tricks.com) |
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...
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 */
}
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)
I think that average quality websites made for public Internet should use only features that have been supported at least for 5 years in major browsers including mobile. And a high quality site must be usable in 10-years old browser.
Also, how did you come across those books? I just found out about Every Layout in this thread. I'm not a web developer so I don't know if it was advertised in a web dev forum or what.
† The only problem is that the atrocious #fafafa on #050505 is made a whole lot worse because there aren't a bunch of even worse things distracting you from it.
> every prime number card
You got me, CSS alone can't select only primes.
Plus you're going to need this approach anyway if you want to do any more advanced logic like maybe you have a list of users and you want to color them based on some status.
With this method you have the above logic all in one place and in one language. After having used traditional CSS with selectors vs this method I really can't go back.
const isLast = i === cards.length - 1
const className = "card" + isLast ? '' : 'card-margin'
> all in one place and in one language
That seems like the real reason, keeping to one language.
I think following the rule of least power [0], having HTML semantics do what it's good at, CSS what its good at, and JavaScript for the rest is best for robust and performant outcomes.
<Card className={className} />
or `card ${isLast ? '' : 'card-margin'}`
- eliminating the chance of colliding CSS class names when composing multiple micro-clients together
- simplifying builds, especially cascading builds (library + client). It's nice when styles are covered entirely by the JS build (no separate CSS/SCSS input or output files or separate build pipelines).
Yes, there are other complexities/problems that styled-components adds (including the likelihood that devs will forget about the cascade)... so I wouldn't recommend it for every case. But it does have its place.
Why? You could add the same constraints to the sizer: min, max, flex shrink/grow, put a line or any other shape in it. It wouldn’t even take a separate “display” mode, just make :row-start, :row-end and :row-wrap pseudoclasses to control collapsibility of regular divs at the sides of a container (or whatever styling you need, anything). Instead they feed us yet another crippled special case with these gaps.
It's just that their imagery is intentionally quite jarring to christians. To quote the satanists. It is not them who believe in Satan, its the christians who believe in Satan.
Seems anti-social, especially when injected into a non-religious context like a site about web design.
When you're doing a side effect free transform of some data, I find .map far clearer.
A for loop would require .push type noise for that case and so personally I'd find that noisier and harder to skim read.
Tastes vary, of course, but certainly it doesn't seem funny to me at all.
All this may be quite dependent on where you live (the mention of the "church tax" makes me suppose Germany, as they have a Kirchensteuer, but I'm sure other countries must have a similar tax). In any case, there are European countries without church tax, beyond normal taxes that could be used for preservation of historical sites, religious or otherwise (which I agree may be somewhat biased in what religious sites can pretend to be considered historical).
Similarly, many countries do not have "religion" classes in "publicly funded schools", especially in countries that are (supposedly or admittedly) laic. That being said, there's also often a bias there as a lot of holidays are tied to religion and Christianity in particular, and it'd be quite common to explain in class the origin and nature of these holidays. I'd hardly think it counts as "religion" class, though, but that'd depend on what the teachers do.
Other european countries are more laical or secular, but that is pretty much just flavor today.
Some eastern countries are more involved, but if you propose the church having relevant influence in central or western Europe, you really slept the last two decades.
But, I still find this funny.
At any rate, "it's okay for text not to be pure black and backgrounds not to be pure white" has become my tiny hill to die on.
https://webaim.org/resources/contrastchecker/
It's basically a measure of perceived brightness. The actual formula involves calculating the relative luminance of the background and foreground colors, where luminance is a value from 0 (darkest) to 1 (lightest), and using the formula
(lighter_luminance + 0.05) / (darker_luminance + 0.05)
So the highest possible contrast ratio in this system is 21:1.
I like checking with Lea Verou's https://contrast-ratio.com because it can check colors written in many different formats, not just hex. Also, it can do +/- contrast ranges when colors include the alpha channel.
In the Chrome and Firefox DevTools, you often can simply click the color swatch for the `color` property. The pop-up includes the contrast number vs. the background-color for that text and whether or not it meets a Web Content Accessibility Guidelines (WCAG) contrast criteria (Level AA if it's 4.5 or above for regular-sized text, Level AAA if its 7 or above for regular-sized text).
The problem is that Europe is split up into dozens of countries with very somewhat different values and cultures, so whenever you say "In Europe X happens", then you can always invoke some version of your argument.
Europe is France, Netherlands, Albania, Moldova. All of these are very different in various statistics.
Neither of those are true for Europe.
I would argue that it is fair to say that the US is more homogeneous than Europe, especially if you are talking about the entire Europe, and not just the EU.
But, how common is it really in Croatia or Poland to use christian terms such as "satanist" when you want to say that you are an atheist?
If, say, a courthouse has a statue of a religious theme, then by the law of the land, the courthouse must be willing to erect a statue for any religion. Like, say, a statue of Baphomet. Or they can remove _all_ of the religious iconography. That demographics are mostly Christian and so such things are overtly offensive makes it more effective.
So, atheists or agnostics or even people of more orthodox religious persuasion are using the Church of Satan as a vehicle of representation for a strong stance on the separation of church and state.
in Croatia at least, they use the term "communist" or "child of a yugoslav officer" to slander atheists or secularists.