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; } } }

An easy to implement technique for fading in a page with CSS & JavaScript, useful for pages that have a slight delay when loading.

Hello! Here are some examples of weird things that can happen with CSS. This site goes with the zine Hell Yes, CSS!.

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

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.

A good overview of the different ways of controlling text selection with CSS.

Click on the code or the sidebar to see which is what.

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.

*10 Modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of styling code can be.

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.

Here's the CSS: ``` .full-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); } ``` And then added an internal wrapper to keep the content aligned with the content max-width: ``` .full-bleed .wrapper { max-width: 50rem; margin-left: auto; margin-right: auto; } ```

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.

A tool for building out comma-separated multiple box-shadows, which result in a much smoother and more natural look.

Support tables for HTML and CSS in emails.

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.

Experiments demonstrating CSS Grid, and what's now possible in graphic design on the web.

How to do this.

Print continues to be treated somewhat cursorily by most Web designers, who tend to be obsessed with pixels rather than printers. In the real world, a significant portion of people rely on pages printed from websites for reference: there’s still something about having a physical sheet of paper in one’s hands, even in this age of digital saturation.

A small collection of useful CSS techniques and a quick reminder that print style sheets are still a thing.

We have covered print stylesheets in the past here on Smashing Magazine. In this article, Rachel Andrew takes a look at the state of printing from the browser today.

There are many possibilities for modal overlays to appear. Here are some modern ways of showing them using CSS transitions and animations.

I think it’s important to publish what you learn. There’s really no school for front-end development. You can’t go to a university for a JavaScript degree or a class about how browsers work. Most of us learn from blogs and Twitter. Early in my career, I learned a bunch of things whenever I worked on a project, but I never told other people about them. So my general advice is to publish what you learn, share with the community, and collaborate on projects that help move the community forward.

As Paul Irish put it, ‘Some of the finest research and writing about HTML & CSS & JS.’

‘This is a simple trick to overlay a grid or a mock-up over a page you're styling. It will also allow you to edit content directly in the browser to see how your layout behaves depending on various lines of text.’