CSS/HTML 最佳实践

Question

我正在搜索 CSS 最佳实践。我的意思是最佳实践，例如

* {
    box-sizing: border-box;
}
body {
    font-family: Inter;   
    margin: 0;
    padding: 0;
   }
.row {
    flex-direction:row;
}

我的意思是每个页面都应该包含一些内容。您能给我您通常使用的所有最佳实践吗？我想了解一下 html 的做法，如果你有的话。

令我惊讶的是，在谷歌上找到它们并不容易。

Answer 1

CSS 最佳实践：

1. 重置盒子尺寸：

   • { 框大小：边框框； }

2. 设置默认字体：

   身体{ 字体系列：Arial、无衬线字体； }

3. 重置边距和填充：

   body, h1, p, ul { 保证金：0； 填充：0； }

4. 使用 Flexbox/Grid 进行布局：

   .容器{ 显示：柔性； /* 或者 */ 显示：网格； }

5. 带有媒体查询的响应式设计：

   @media（最大宽度：768px）{ /* 小屏幕的样式 */ }

6. 使用 CSS 变量：

   ：根{ --主颜色：#333； } 。元素 { 颜色：var(--主颜色)； }

HTML 最佳实践：

1. 使用适当的 HTML5 元素，如

   <header>, <nav>, <footer>, <article>, <section>

   等，以获得更好的可访问性和 SEO。

2. 在 html 标题部分声明内容语言。

3. 为图像提供 Alt 属性：

4. 使用结构化数据： 在搜索结果中使用 schema.org 标记来获取丰富的摘要。

5. 避免内联样式： 将样式保留在单独的 CSS 文件中，而不是使用内联样式。

6. 正确使用标题： 分层使用标题 ( 到 ) 来逻辑地构建内容。

7. 优化性能： 尽量减少使用不必要的 HTML 元素和属性以提高性能。

8. SEO最佳实践： 在标题、标题和元描述中包含相关关键字。