用于二维布局的 Grid

/* 使用 auto-fit 的响应式网格 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

/* 使用命名网格区域实现语义化布局 */
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* 用于类砖石布局的密集填充 */
.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-flow: dense;
  gap: 1rem;
}

容器查询（媒体查询的现代替代方案）

/* 容器查询设置 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* 查询容器，而非视口 */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 150px 1fr;
  }
}

@container card (min-width: 600px) {
  .card {
    grid-template-columns: 200px 1fr;
  }
}

现代 CSS 特性

自定义属性（CSS 变量）

:root {
  /* 颜色系统 */
  --color-primary: #0066cc;
  --color-primary-dark: #004499;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  
  /* 间距比例 */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  
  /* 排版 */
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: 'Fira Code', monospace;
  
  /* 使用数据属性的深色模式 */
  --bg: var(--color-surface);
  --fg: var(--color-text);
}

[data-theme="dark"] {
  --color-surface: #1a1a1a;
  --color-text: #e5e5e5;
}

/* 使用自定义属性 */
.button {
  background: var(--color-primary);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
}

层叠层 (@layer)

/* 定义层顺序 - 特异性最低的优先 */
@layer reset, base, components, utilities;

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

@layer base {
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
  }
}

@layer components {
  .button {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
  }
}

@layer utilities {
  .text-center { text-align: center; }
  .hidden { display: none; }
}

现代选择器

/* 用于分组的 :is()（不增加特异性） */
:is(h1, h2, h3) {
  font-weight: 700;
  line-height: 1.2;
}

/* 零特异性的 :where() */
:where(.card, .panel) > :where(h2, h3) {
  margin-top: 0;
}

/* 用于父元素选择的 :has() */
.card:has(img) {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.form:has(:invalid) .submit-button {
  opacity: 0.5;
  pointer-events: none;
}

/* 用于国际化的逻辑属性 */
.element {
  margin-inline-start: 1rem; /* 替代 margin-left */
  padding-block: 2rem; /* 替代 padding-top 和 padding-bottom */
  border-inline-end: 1px solid; /* 替代 border-right */
}

动画和过渡

高性能动画

/* 仅对 transform 和 opacity 进行动画以实现 60fps */
.smooth-animation {
  /* 给浏览器的优化提示 */
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.smooth-animation:hover {
  transform: translateY(-4px);
}

/* 动画后移除 will-change */
.smooth-animation:not(:hover) {
  will-change: auto;
}

/* 复杂的关键帧动画 */
@keyframes slideInFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: slideInFade 0.4s ease-out;
}

视图过渡 API

/* 平滑的页面过渡 */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

/* 特定元素的命名过渡 */
.hero {
  view-transition-name: hero-image;
}

::view-transition-old(hero-image),
::view-transition-new(hero-image) {
  animation-duration: 0.5s;
}

滚动驱动动画

/* 基于滚动进度进行动画 */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-reveal {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

响应式设计模式

现代媒体查询策略

/* 移动优先方法 */
.component {
  /* 基础移动端样式 */
  padding: 1rem;
}

/* 平板电脑 */
@media (min-width: 768px) {
  .component {
    padding: 2rem;
  }
}

/* 桌面端 */
@media (min-width: 1024px) {
  .component {
    padding: 3rem;
  }
}

/* 宽屏桌面端 */
@media (min-width: 1440px) {
  .component {
    padding: 4rem;
  }
}

/* 偏好减少动画 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 深色模式偏好 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --fg: #e5e5e5;
  }
}

流式排版

/* 使用 clamp 实现响应式字体大小 */
h1 {
  font-size: clamp(2rem, 4vw + 1rem, 4rem);
}

body {
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
}

/* 或使用自定义属性 */
:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1140;
  --fluid-min-size: 16;
  --fluid-max-size: 20;
  
  --fluid-size: calc(
    (var(--fluid-min-size) * 1px) +
    (var(--fluid-max-size) - var(--fluid-min-size)) *
    ((100vw - (var(--fluid-min-width) * 1px)) /
    (var(--fluid-max-width) - var(--fluid-min-width)))
  );
}

body {
  font-size: clamp(
    var(--fluid-min-size) * 1px,
    var(--fluid-size),
    var(--fluid-max-size) * 1px
  );
}

性能优化

关键性能规则

/* 1. 避免昂贵的属性 */
.avoid {
  box-shadow: ...; /* 可以，GPU 加速 */
  filter: ...; /* 昂贵，谨慎使用 */
}

/* 2. 为独立组件使用包含 */
.card {
  contain: layout style paint;
  /* 告诉浏览器此元素的样式不会影响其他元素 */
}

.isolated-component {
  content-visibility: auto; /* 跳过屏幕外元素的渲染 */
}

/* 3. 优化选择器 - 特异性 vs 性能 */
/* 快速 ✅ */
.button { }
.nav-item { }

/* 较慢 ❌ */
div.container ul li a.link { }
[class*="btn-"] { }

CSS 加载策略

<!-- 关键 CSS 内联在 <head> 中 -->
<style>
  /* 首屏样式 */
</style>

<!-- 使用媒体查询技巧的非关键 CSS -->
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

<!-- 预加载以加快加载速度 -->
<link rel="preload" href="fonts.woff2" as="font" type="font/woff2" crossorigin>

命名约定和组织

BEM（块元素修饰符）

/* 块 */
.card { }

/* 元素 - 块的一部分 */
.card__title { }
.card__body { }
.card__footer { }

/* 修饰符 - 块的变体 */
.card--featured { }
.card--large { }
.card__title--primary { }

工具类优先（Tailwind 风格）

/* 间距工具类 */
.p-4 { padding: 1rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.mt-2 { margin-top: 0.5rem; }

/* 布局工具类 */
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }

/* 排版工具类 */
.text-lg { font-size: 1.125rem; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }

文件组织

styles/
├── base/
│   ├── reset.css
│   ├── typography.css
│   └── utilities.css
├── components/
│   ├── button.css
│   ├── card.css
│   └── nav.css
├── layout/
│   ├── grid.css
│   ├── header.css
│   └── footer.css
├── themes/
│   ├── light.css
│   └── dark.css
└── main.css (imports all)

现代颜色函数

:root {
  /* 现代颜色函数 */
  --primary: oklch(60% 0.2 250); /* 感知均匀 */
  --surface: color-mix(in oklch, var(--primary) 10%, white);
  
  /* 相对颜色 */
  --primary-light: oklch(from var(--primary) calc(l + 20%) c h);
  --primary-dark: oklch(from var(--primary) calc(l - 20%) c h);
  
  /* 可访问性的颜色对比度 */
  --text-color: color-contrast(
    var(--surface) vs black, white
  );
}

浏览器兼容性策略

特性查询 (@supports)

/* 旧版浏览器的回退方案 */
.grid {
  display: flex;
  flex-wrap: wrap;
}

/* 现代浏览器的增强 */
@supports (display: grid) {
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

/* 渐进增强 */
.button {
  background: blue;
}

@supports (backdrop-filter: blur(10px)) {
  .button {
    background: rgba(0, 0, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

常见模式和解决方案

宽高比

/* 现代方式 */
.video {
  aspect-ratio: 16 / 9;
}

/* 对于图片 */
img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

文本截断

/* 单行 */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 多行 */
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

平滑滚动

html {
  scroll-behavior: smooth;
}

/* 滚动捕捉 */
.carousel {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
}

.carousel > * {
  scroll-snap-align: start;
}

可访问性考虑

/* 仅对键盘用户显示焦点 */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 视觉隐藏但保留给屏幕阅读器 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* 尊重用户偏好 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: high) {
  .button {
    border: 2px solid currentColor;
  }
}

CSS 重置 / 标准化

/* 现代 CSS 重置 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

快速参考

查看 references/ 获取详细指南：

• 现代布局技术（flexbox、grid、容器查询）
• 动画和过渡最佳实践
• 性能优化策略
• 响应式设计模式
• 可访问性指南

工作流程

1. 从 context7 开始 - 查阅不熟悉的属性或现代特性
2. 移动优先 - 为移动端设计和编码，为大屏幕增强
3. 使用特性查询 - 通过 @supports 进行渐进增强
4. 跨浏览器测试 - 在 Chrome、Firefox、Safari、Edge 中验证
5. 验证 - 使用 W3C CSS 验证器确保标准合规性
6. 优化 - 最小化重排，使用 contain，利用 GPU 加速
7. 文档化 - 注释复杂的计算、魔法数字、浏览器 hack

工具和资源

• context7 - 主要文档查阅工具
• MDN Web 文档 - 全面的 CSS 参考（通过 context7）
• Can I Use - 浏览器兼容性数据（通过 context7）
• CSS 规范 - W3C 规范获取详细行为（通过 context7）
• PostCSS - 使用 JavaScript 插件转换 CSS
• CSS 模块 - 组件的范围化 CSS
• Sass/SCSS - 包含变量、嵌套、混合的 CSS 预处理器
• Lightning CSS - 快速的 CSS 解析器、转换器和压缩器

记住：当对任何 CSS 特性、语法或浏览器支持有疑问时，请使用 context7 查阅实时文档。

每周安装数

80

仓库

jaredlander/fre…ks-speed

首次出现

2026年1月24日

安全审计

Gen Agent Trust HubPassSocketPassSnykPass

安装于

opencode57

github-copilot56

codex53

gemini-cli50

kimi-cli43

amp42

Modern Layout Techniques

Flexbox for One-Dimensional Layouts

/* Common flex patterns */
.container {
  display: flex;
  gap: 1rem; /* Prefer gap over margins for spacing */
}

/* Center content */
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Responsive flex wrapping */
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flex-wrap > * {
  flex: 1 1 300px; /* Grow, shrink, basis */
}

/* Common flex utilities */
.flex-1 { flex: 1; }
.flex-none { flex: none; }
.flex-auto { flex: auto; }

Grid for Two-Dimensional Layouts

/* Responsive grid with auto-fit */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

/* Named grid areas for semantic layouts */
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* Dense packing for masonry-like layouts */
.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-flow: dense;
  gap: 1rem;
}

Container Queries (Modern Alternative to Media Queries)

/* Container query setup */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* Query the container, not the viewport */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 150px 1fr;
  }
}

@container card (min-width: 600px) {
  .card {
    grid-template-columns: 200px 1fr;
  }
}

Modern CSS Features

Custom Properties (CSS Variables)

:root {
  /* Color system */
  --color-primary: #0066cc;
  --color-primary-dark: #004499;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  
  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  
  /* Typography */
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: 'Fira Code', monospace;
  
  /* Dark mode using data attribute */
  --bg: var(--color-surface);
  --fg: var(--color-text);
}

[data-theme="dark"] {
  --color-surface: #1a1a1a;
  --color-text: #e5e5e5;
}

/* Using custom properties */
.button {
  background: var(--color-primary);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
}

Cascade Layers (@layer)

/* Define layer order - lowest specificity first */
@layer reset, base, components, utilities;

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

@layer base {
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
  }
}

@layer components {
  .button {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
  }
}

@layer utilities {
  .text-center { text-align: center; }
  .hidden { display: none; }
}

Modern Selectors

/* :is() for grouping (no specificity increase) */
:is(h1, h2, h3) {
  font-weight: 700;
  line-height: 1.2;
}

/* :where() for zero specificity */
:where(.card, .panel) > :where(h2, h3) {
  margin-top: 0;
}

/* :has() for parent selection */
.card:has(img) {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.form:has(:invalid) .submit-button {
  opacity: 0.5;
  pointer-events: none;
}

/* Logical properties for internationalization */
.element {
  margin-inline-start: 1rem; /* Instead of margin-left */
  padding-block: 2rem; /* Instead of padding-top and padding-bottom */
  border-inline-end: 1px solid; /* Instead of border-right */
}

Animations and Transitions

Performant Animations

/* Only animate transform and opacity for 60fps */
.smooth-animation {
  /* Hint to browser for optimization */
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.smooth-animation:hover {
  transform: translateY(-4px);
}

/* Remove will-change after animation */
.smooth-animation:not(:hover) {
  will-change: auto;
}

/* Complex keyframe animations */
@keyframes slideInFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: slideInFade 0.4s ease-out;
}

View Transitions API

/* Smooth page transitions */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

/* Named transitions for specific elements */
.hero {
  view-transition-name: hero-image;
}

::view-transition-old(hero-image),
::view-transition-new(hero-image) {
  animation-duration: 0.5s;
}

Scroll-Driven Animations

/* Animate on scroll progress */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-reveal {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

Responsive Design Patterns

Modern Media Query Strategy

/* Mobile-first approach */
.component {
  /* Base mobile styles */
  padding: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
  .component {
    padding: 2rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .component {
    padding: 3rem;
  }
}

/* Wide desktop */
@media (min-width: 1440px) {
  .component {
    padding: 4rem;
  }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --fg: #e5e5e5;
  }
}

Fluid Typography

/* Clamp for responsive font sizes */
h1 {
  font-size: clamp(2rem, 4vw + 1rem, 4rem);
}

body {
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
}

/* Or using custom properties */
:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1140;
  --fluid-min-size: 16;
  --fluid-max-size: 20;
  
  --fluid-size: calc(
    (var(--fluid-min-size) * 1px) +
    (var(--fluid-max-size) - var(--fluid-min-size)) *
    ((100vw - (var(--fluid-min-width) * 1px)) /
    (var(--fluid-max-width) - var(--fluid-min-width)))
  );
}

body {
  font-size: clamp(
    var(--fluid-min-size) * 1px,
    var(--fluid-size),
    var(--fluid-max-size) * 1px
  );
}

Performance Optimization

Critical Performance Rules

/* 1. Avoid expensive properties */
.avoid {
  box-shadow: ...; /* OK, GPU accelerated */
  filter: ...; /* Expensive, use sparingly */
}

/* 2. Use containment for isolated components */
.card {
  contain: layout style paint;
  /* Tells browser this element's styles won't affect others */
}

.isolated-component {
  content-visibility: auto; /* Skip rendering offscreen elements */
}

/* 3. Optimize selectors - specificity vs performance */
/* Fast ✅ */
.button { }
.nav-item { }

/* Slower ❌ */
div.container ul li a.link { }
[class*="btn-"] { }

CSS Loading Strategies

<!-- Critical CSS inline in <head> -->
<style>
  /* Above-the-fold styles */
</style>

<!-- Non-critical CSS with media query trick -->
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

<!-- Preload for faster loading -->
<link rel="preload" href="fonts.woff2" as="font" type="font/woff2" crossorigin>

Naming Conventions and Organization

BEM (Block Element Modifier)

/* Block */
.card { }

/* Element - part of block */
.card__title { }
.card__body { }
.card__footer { }

/* Modifier - variation of block */
.card--featured { }
.card--large { }
.card__title--primary { }

Utility-First (Tailwind-style)

/* Spacing utilities */
.p-4 { padding: 1rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.mt-2 { margin-top: 0.5rem; }

/* Layout utilities */
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }

/* Typography utilities */
.text-lg { font-size: 1.125rem; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }

File Organization

styles/
├── base/
│   ├── reset.css
│   ├── typography.css
│   └── utilities.css
├── components/
│   ├── button.css
│   ├── card.css
│   └── nav.css
├── layout/
│   ├── grid.css
│   ├── header.css
│   └── footer.css
├── themes/
│   ├── light.css
│   └── dark.css
└── main.css (imports all)

Modern Color Functions

:root {
  /* Modern color functions */
  --primary: oklch(60% 0.2 250); /* Perceptually uniform */
  --surface: color-mix(in oklch, var(--primary) 10%, white);
  
  /* Relative colors */
  --primary-light: oklch(from var(--primary) calc(l + 20%) c h);
  --primary-dark: oklch(from var(--primary) calc(l - 20%) c h);
  
  /* Color contrast for accessibility */
  --text-color: color-contrast(
    var(--surface) vs black, white
  );
}

Browser Compatibility Strategies

Feature Queries (@supports)

/* Fallback for older browsers */
.grid {
  display: flex;
  flex-wrap: wrap;
}

/* Enhanced for modern browsers */
@supports (display: grid) {
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

/* Progressive enhancement */
.button {
  background: blue;
}

@supports (backdrop-filter: blur(10px)) {
  .button {
    background: rgba(0, 0, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

Common Patterns and Solutions

Aspect Ratio

/* Modern way */
.video {
  aspect-ratio: 16 / 9;
}

/* For images */
img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Truncation

/* Single line */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multiple lines */
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Smooth Scrolling

html {
  scroll-behavior: smooth;
}

/* Scroll snapping */
.carousel {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
}

.carousel > * {
  scroll-snap-align: start;
}

Accessibility Considerations

/* Focus visible for keyboard users only */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Hide visually but keep for screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: high) {
  .button {
    border: 2px solid currentColor;
  }
}

CSS Reset / Normalize

/* Modern CSS reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

Quick Reference

See references/ for detailed guides on:

• Modern layout techniques (flexbox, grid, container queries)
• Animation and transition best practices
• Performance optimization strategies
• Responsive design patterns
• Accessibility guidelines

Workflow

1. Start with context7 - Look up unfamiliar properties or modern features
2. Mobile-first - Design and code for mobile, enhance for larger screens
3. Use feature queries - Progressive enhancement with @supports
4. Test across browsers - Verify in Chrome, Firefox, Safari, Edge
5. Validate - Use W3C CSS Validator for standard compliance
6. Optimize - Minimize reflows, use contain, leverage GPU acceleration
7. Document - Comment complex calculations, magic numbers, browser hacks

Tools and Resources

• context7 - Primary documentation lookup tool
• MDN Web Docs - Comprehensive CSS reference (via context7)
• Can I Use - Browser compatibility data (via context7)
• CSS Specifications - W3C specs for detailed behavior (via context7)
• PostCSS - Transform CSS with JavaScript plugins
• CSS Modules - Scoped CSS for components
• Sass/SCSS - CSS preprocessor with variables, nesting, mixins
• Lightning CSS - Fast CSS parser, transformer, and minifier

Remember : When in doubt about any CSS feature, syntax, or browser support, use context7 to look it up in real-time documentation.

Weekly Installs

80

Repository

jaredlander/fre…ks-speed

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

opencode57

github-copilot56

codex53

gemini-cli50

kimi-cli43

amp42