The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project.
Let’s take a look inside your
Your is the single biggest render-blocking part of your page—ensuring it is well-formed is critical. ct.css is a diagnostic CSS snippet that exposes potential performance issues in your page’s tags.
I can’t seem to find any mention of this in the Media Queries Module specification, but apparently it’s allowed to nest media queries.
E.g.:
@media not print { @media (min-width: 0) { p { background: yellow; } } }
The community-driven resource library of CSS Houdini worklets. Learn about CSS Houdini, its APIs, usage, polyfills, and browser status, to take advantage of the Houdini APIs today.
“Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine. Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers.” —MDN
If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you've chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths [1]. This tool helps you do exactly that.
Nicky Meuleman: A CSS-only, animated, wrapping underline.
Underlines are hard. Complications quickly arise if you want to do anything fancier than the good ol’ CSS text-decoration: underline. There are a lot of different techniques. Unfortunately, they nearly always come with significant drawbacks.
The amount of research and testing that had to go into this demonstrates how fractured and broken web performance is right now.
But, since it is, there's a useful snippet at the end of this article.
Google Fonts is fast. Now it’s faster. Much faster.
Including some centering techniques, `li::marker`, and `display: inline-flex`, `column-rule`, `background-repeat: round`.
There are a lot of CSS properties that some don’t know about, or they know about them, but forget to use them when they’re needed.
Great demos for mostly-CSS card flip, cube, and carousels.
With the introduction of CSS transforms, elements could be shifted, rotated, slanted, squashed and stretched. Web designers were finally able to catch up to print designers. With CSS 3D transforms, web designers can move past their print counterparts and explore a new realm in graphic design.
People have argued that there should be new versions with a certain frequency. But not too often, because people don’t have time to read too many announcements. And people will want to write books about the new version, or develop talks and courses about it, which takes time. As Jen Simmons wrote, quoting Chris Coyier, ‘a tremendous number of books, courses, and conferences were dedicated to CSS3’ even though there is no definition of what CSS3 is. The working group certainly never defined it.
Andrian Roselli: Block Links, Cards, Clickable Regions, Etc.
Perhaps the worst thing you can do for a block link is to wrap everything in the .
If you fail to make the link to display: block, it will have dead areas around words or chunks of text, which can make them feel like distinct links for a mouse user. If you use an underline on the entire block of text, it can be hard to read, while no underline at all can remove that visual affordance.
Worse, for a screen reader user the entire string is read when tabbing through controls. In the following example, the first link contains the heading, image (without declaring it as an image), and block of text, taking about 25 seconds to read before announcing it as a link. When tabbing, you do not always know the control type until the accessible name is complete.
If anyone has to add a quick hack, they add it to shame.css, this means that they’re putting their hacks out there in the open; it means that they are aware that what they’re doing is hacky, it forces them to document what the problem was, how the hack fixes it, and how they might fix it for real given more time.
It means that other developers can see what hacks are being introduced, and why; it means that all the hacky bits of CSS are self contained, and it creates a self-fulfilling todo list.
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
Chris Coyier: CSS Animation Libraries (CSS-Tricks)
There are an awful lot of libraries that want to help you animate things on the web. These aren't really libraries that help you with the syntax or the technology of animations, but rather are grab-and-use as-is libraries. Want to apply a class like "animate-flip-up" and watch an element, uhhh, flip up? These are the kind of libraries to look at.
I wholeheartedly think you should both 1) learn how to animate things in CSS by learning the syntax yourself and 2) customize animations to tailor the feel to your site. Still, poking around libraries like this helps foster ideas, gets you started with code examples, and might form a foundation for your own projects.
