html-css-best-practices

Name: html-css-best-practices
Author: hack23

github.com/hack23设计与 UI13181 次安装今天更新

代码仓库

关于 html-css-best-practices

html-css-best-practices 是面向 Hack23 Homepage 及相关项目的 HTML 与 CSS 实践技能，供构建网页界面的开发者参考。内容涵盖语义化结构、响应式设计、性能优化和验证测试。

主要功能

01语义化 HTML5 结构规范
02CSS 组织与自定义属性规则
03移动优先的响应式设计
04性能与浏览器兼容建议
05HTML、CSS 与页面验证测试

适用场景

01规划网页的语义化页面结构
02组织可维护的 CSS 样式表
03检查移动端布局与触控目标
04验证页面性能和跨浏览器表现

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/hack23/homepage --skill html-css-best-practices

安装后在 Claude Code 中输入/html-css-best-practices确认已加载。

详细介绍

HTML/CSS 最佳实践技能

目的

此技能为构建易访问、高性能且易维护的 Web 界面定义 HTML 和 CSS 最佳实践，具体适用于 Hack23 Homepage 及相关项目。

规则

语义化 HTML5

必须使用：

<header> 表示网站／页面页眉
<nav> 表示导航菜单
<main> 表示主要内容（每页一个）
<article> 表示独立完整的内容
<section> 表示主题分组
<aside> 表示辅助内容
<footer> 表示网站／页面页脚
按层级顺序使用 <h1>-<h6>（不要跳过级别）
使用 <button> 执行交互操作
使用 <a> 进行导航
使用 <figure> 和 <figcaption> 为图片添加说明
使用 <time datetime=""> 表示日期／时间

不得：

在存在语义化元素时使用 <div>
使用 <span> 包裹块级内容
跳过标题级别（例如，从 h1 跳到 h3）
使用 <br> 调整间距（应使用 CSS）
使用表格进行布局（应使用 CSS Grid/Flexbox）

HTML 结构

必须：

包含 <!DOCTYPE html>
在 <html> 元素上设置 lang 属性
包含字符集声明：<meta charset="UTF-8">
包含视口元数据：<meta name="viewport" content="width=device-width, initial-scale=1.0">
使用描述性 <title>（每页唯一）
包含 meta description
正确闭合所有标签
元素名称和属性使用小写
所有属性值都加引号
使用 W3C 验证器验证 HTML

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Hack23 - Cybersecurity consulting with transparency">
  <title>Hack23 - Cybersecurity Consulting</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav>...</nav>
  </header>
  <main>
    <article>...</article>
  </main>
  <footer>...</footer>
</body>
</html>

CSS 组织

必须：

使用单个外部样式表（styles.css）
按逻辑组织 CSS：
1. CSS 自定义属性（变量）
2. 重置／规范化
3. 基础样式（html、body、标题）
4. 布局（header、nav、main、footer）
5. 组件
6. 工具类
7. 媒体查询
使用有意义的类名（建议采用 BEM 方法）
避免使用 !important（正确使用优先级）
将相关属性分组
适当使用简写属性
为复杂部分添加注释

示例：

/* CSS Custom Properties */
:root {
  --primary-color: #2c3e50;
  --secondary-color: #3498db;
  --text-color: #333;
  --bg-color: #fff;
  --max-width: 1200px;
  --spacing-unit: 8px;
}

/* Base Styles */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text-color);
  background-color: var(--bg-color);
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* Layout */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 calc(var(--spacing-unit) * 2);
}

/* Components */
.button {
  display: inline-block;
  padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
  background-color: var(--primary-color);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.button:hover,
.button:focus {
  background-color: var(--secondary-color);
}

CSS 自定义属性（变量）

必须用于：

颜色（主色、辅助色、背景、文本）
间距（外边距、内边距的倍数）
排版（字号、行高）
断点
过渡／动画
z-index 值

优点：

轻松切换主题
全站值保持一致
更易维护
可在运行时更新

响应式设计

必须：

采用移动端优先的设计（基础样式适用于移动端，媒体查询适用于更大的屏幕）
优先使用相对单位（rem、em、%、vw、vh），而非固定的 px
在多个断点（320px、768px、1024px、1440px+）进行测试
使用 CSS Grid 或 Flexbox 进行布局
确保触控目标至少为 44×44px
避免水平滚动
使用 max-width 提高可读性（每行 60-80 个字符）

建议的断点：

/* Mobile-first base styles */

/* Tablet */
@media (min-width: 768px) {
  /* Tablet styles */
}

/* Desktop */
@media (min-width: 1024px) {
  /* Desktop styles */
}

/* Large Desktop */
@media (min-width: 1440px) {
  /* Large desktop styles */
}

性能优化

必须：

尽量减小 CSS 文件大小（移除未使用的样式）
在生产环境中使用 CSS 压缩
避免选择器嵌套过深（最多 3 层）
使用高效的选择器（避免使用通配符 *）
在 <head> 中加载 CSS（必要时使用阻塞加载）
考虑为首屏内容使用关键 CSS
动画中谨慎使用 will-change
优化图片（WebP 格式、延迟加载）

图片优化：


<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>


<svg width="24" height="24" aria-hidden="true">
  <use xlink:href="#icon-name"></use>
</svg>

浏览器兼容性

必须：

在现代浏览器（Chrome、Firefox、Safari、Edge）中测试
使用 autoprefixer 添加供应商前缀
为较新的 CSS 特性提供回退方案
采用渐进增强

带回退方案的示例：

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

@supports (display: grid) {
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }
}

示例

示例 1：语义化 HTML 页面结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Cybersecurity consulting services with transparent security practices">
  <title>Services - Hack23 Cybersecurity Consulting</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="site-header">
    <div class="container">
      <a href="index.html" class="logo">
        <img src="logo.svg" alt="Hack23 Logo" width="150" height="50">
      </a>
      <nav aria-label="Main navigation">
        <ul class="nav-menu">
          <li><a href="index.html">Home</a></li>
          <li><a href="services.html" aria-current="page">Services</a></li>
          <li><a href="projects.html">Projects</a></li>
          <li><a href="blog.html">Blog</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main class="main-content">
    <div class="container">
      <article>
        <header>
          <h1>Cybersecurity Consulting Services</h1>
          <p class="lead">Transparent, effective security for modern organizations</p>
        </header>

        <section>
          <h2>Security Assessments</h2>
          <p>Comprehensive evaluation of your security posture...</p>
        </section>

        <section>
          <h2>Compliance Support</h2>
          <p>ISO 27001, GDPR, NIS2 compliance assistance...</p>
        </section>
      </article>

      <aside class="sidebar">
        <h2>Related Services</h2>
        <nav aria-label="Related services">
          <ul>
            <li><a href="penetration-testing.html">Penetration Testing</a></li>
            <li><a href="security-training.html">Security Training</a></li>
          </ul>
        </nav>
      </aside>
    </div>
  </main>

  <footer class="site-footer">
    <div class="container">
      <p>&copy; <time datetime="2025">2025</time> Hack23 AB. All rights reserved.</p>
      <nav aria-label="Footer navigation">
        <ul>
          <li><a href="privacy.html">Privacy Policy</a></li>
          <li><a href="accessibility.html">Accessibility</a></li>
        </ul>
      </nav>
    </div>
  </footer>
</body>
</html>

示例 2：使用自定义属性的 CSS

/* ===========================
   CSS Custom Properties
   =========================== */
:root {
  /* Colors */
  --color-primary: #2c3e50;
  --color-secondary: #3498db;
  --color-accent: #e74c3c;
  --color-text: #333;
  --color-text-light: #666;
  --color-bg: #ffffff;
  --color-bg-alt: #f8f9fa;
  --color-border: #dee2e6;

  /* Typography */
  --font-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;
  --font-size-base: 16px;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --line-height-base: 1.6;
  --line-height-heading: 1.2;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  /* Layout */
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --header-height: 80px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
}

/* ===========================
   Reset & Base Styles
   =========================== */
* {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
}

body {
  font-family: var(--font-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: var(--line-height-base);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--line-height-heading);
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  color: var(--color-primary);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover,
a:focus {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ===========================
   Layout
   =========================== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.site-header {
  background-color: var(--color-primary);
  color: white;
  height: var(--header-height);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.main-content {
  min-height: calc(100vh - var(--header-height) - 200px);
  padding: var(--spacing-xxl) 0;
}

.site-footer {
  background-color: var(--color-bg-alt);
  padding: var(--spacing-xl) 0;
  border-top: 1px solid var(--color-border);
}

/* ===========================
   Components
   =========================== */
.button {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.button:hover,
.button:focus {
  background-color: var(--color-secondary);
  text-decoration: none;
}

.card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--spacing-lg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow var(--transition-base);
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* ===========================
   Utilities
   =========================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.text-center {
  text-align: center;
}

/* ===========================
   Responsive
   =========================== */
@media (min-width: 768px) {
  .container {
    padding: 0 var(--spacing-lg);
  }

  h1 { font-size: 3rem; }
  h2 { font-size: 2.5rem; }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 var(--spacing-xl);
  }
}

示例 3：响应式导航

<nav class="main-nav" aria-label="Main navigation">
  <button class="nav-toggle" aria-expanded="false" aria-controls="nav-menu">
    <span class="visually-hidden">Toggle navigation</span>
    <span class="hamburger"></span>
  </button>
  <ul id="nav-menu" class="nav-menu">
    <li><a href="index.html">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="blog.html">Blog</a></li>
  </ul>
</nav>

.main-nav {
  position: relative;
}

.nav-toggle {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm);
}

.nav-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Show menu when expanded */
.nav-toggle[aria-expanded="true"] + .nav-menu {
  display: block;
}

/* Desktop: horizontal menu, hide toggle */
@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }

  .nav-menu {
    display: flex;
    gap: var(--spacing-md);
  }
}

性能预算

CSS 文件大小：< 50KB（压缩后）
首次内容绘制：< 1.5s
最大内容绘制：< 2.5s
累积布局偏移：< 0.1

验证与测试

HTML 验证器：https://validator.w3.org/
CSS 验证器：https://jigsaw.w3.org/css-validator/
Lighthouse：在 Chrome DevTools 中运行审计
BrowserStack：跨浏览器测试

支持 Markdown

登录后评论

html-css-best-practices

关于 html-css-best-practices

主要功能

适用场景

安装

详细介绍

HTML/CSS 最佳实践技能

目的

规则

语义化 HTML5

HTML 结构

CSS 组织

CSS 自定义属性（变量）

响应式设计

性能优化

浏览器兼容性

示例

示例 1：语义化 HTML 页面结构

示例 2：使用自定义属性的 CSS

示例 3：响应式导航

相关 ISMS 政策

相关文档

性能预算

验证与测试

评论