#css

Hello, everybody. Today, I'm going to talk about how I solved actual challenges in React using only CSS. One of the main packages I maintain is EmojiPicker React, with hundreds of thousands of weekly downloads. It has all the features you'd expect from an EmojiPicker, but the search capability was slow. I managed to fix it using CSS. Let me show you how. The search functionality relies on global state and requires updating each emoji individually, resulting in excessive DOM work. Virtualization or virtual scrolling is not a viable solution due to the non-uniform emoji list. By examining the DOM, I discovered that each emoji had an area label with search-related information. This led me to investigate further and implement a solution from scratch. We create a new component called CSS search, which takes a value as a string. If the value is empty, we return null. We remove all emojis from the emoji list if there are search results. Emojis that match the search term are displayed. Performance is instantaneous. Empty categories are removed using the CSS has attribute. The CSS not and has selectors are used to remove empty categories. A counter is used to display the count of emojis found. By using flexbox and order, we can position the after element at the beginning of the list. CSS nesting allows us to nest everything under the emoji list, simplifying the structure. The performance of the search is still very fast. I created the flareup package, a CSS in JS library specifically for NPM packages. Flareup solves compatibility issues and works on SSR and CSR. Emoji-picker-react uses flareup to render emojis without JavaScript. Flareup places a style element on the DOM, making it easy to use.

Today we're going to talk about best practices for using Tailwind CSS. Tailwind CSS is a popular and controversial tool. It balloons within developers into two opposing camps. For some tasks, Tailwind is extremely cool. After working with Tailwind for a long time, I have identified two main requirements where Tailwind is suitable, and without them, it's better to choose an alternative tool. The first requirement is the project must have a design system. The second requirement for using Tailwind CSS is that your project must have a component approach. If you have a design system and a component approach, then Tailwind CSS may be a nice option for you. Instead of specifying the same margin at the top or the bottom, you can specify only a vertical one. Second rule while working with Tailwind is group design tokens and name them semantically. Rule number three, keep class ordering. The next advice for using Tailwind will be useful not only for Tailwind, but also when working with any content tools, monitor the bundle size and try to optimize it. The last rule for Tailwind, use sets of style variants to avoid problems when overriding classes. Instead of passing classes arbitrarily via props, define a set of variants for the component. Use fewer utility classes, group design tokens, and name them semantically. Keep class ordering, minimize your build size, and use sets of style variants. Remember that Tailwind CSS is a useful tool, but not the only solution for all projects.

Today's Talk covers native features in browsers, including upcoming ones and the Interop Project. Native features offer speed, compatibility, and improved debugging. Notable examples include dynamic viewport units, flexbox/grid gap, container queries, and motion path. The Interop Project ensures consistent web platform features across different browsers. Upcoming features like native CSS nesting and entry/exit animations are on the horizon.

Evitar Alus, a frontend engineer, shares a trick to improve search performance in React applications by optimizing the search algorithm and reducing DOM updates. CSS attribute selectors can be used for filtering and applying styles based on emoji values. A component called CSS Search can be created to improve search performance by hiding emojis that do not match the search query. Despite some performance drawbacks, this solution works significantly faster. Visit Evitar Alus' website or Twitter account for more of their work.

Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.

CSS variables and their possibilities for UI developers, MUI's history and understanding of developer needs, Joy UI's focus on developer experience and use of CSS variables for consistency and future-proofing, the elimination of manual calculations and JavaScript with CSS variables in JoyUI, and the availability of playgrounds and a stable release for exploration.

This Talk explores the evolution of styling architecture, dynamic theming with style components, and optimizing style updates. It discusses the challenges of CSS migration and the choice between JavaScript and CSS native tooling. The Talk also touches on CSS tools and libraries, including Tailwind CSS and CSS in JS major libraries like MUI. The importance of picking a stack based on team members' strengths and the use of namespacing CSS for conflict-free dependency trees are highlighted.

Ankita explains how to build a lightning-fast site using Next.js, GraphQL, and Tailwind. Next.js offers rendering techniques for improved performance and SEO, as well as support for dynamic imports and deferring non-essential scripts. Next.js also provides performance benefits like layout stability and improved lighthouse score, along with server-side rendering and caching. GraphQL allows for efficient data retrieval, Apollo Client handles caching, and Tailwind simplifies CSS. The future goal is to make UI development easier and faster with React server components and Tailwind CSS.

This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.

This talk discusses achieving layout composition in React using Bedrock Layout Primitives. By componentizing CSS layout, complex layouts can be achieved and reused across different components. The talk also covers the challenges of achieving complex layouts, such as card lineups, and provides solutions for maintaining alignment and responsiveness. The BedrockLayout primitive library simplifies web layouts and offers flexibility in composing layouts.

CSS + superpowers - bloat. How Stylex creates a zero-cost abstraction that gives CSS superpowers.