CSS: Unavoidable Bad Parts
14 hours ago
- HTML5语义标签如<main>、<article>、<nav>有助于构建页面结构；不太明显的元素如<ul>、<details>、<dl>也很有用。
- 避免过多的包装元素；优先使用语义化标记和与之配合的CSS。
- 在GUI框架中，布局本质上很困难；理解系统允许的布局，而不是强制使用自己的布局。
- 浏览器默认样式不同，因此使用CSS重置或规范化以保持一致性。
- 无类CSS（直接对HTML元素进行样式设置）在重置后可能有效，避免复杂的选择器。
- CSS选择器可能导致有问题的继承；考虑无类CSS/内联样式或组件作用域嵌套。
- 始终设置box-sizing: border-box，使内边距和边框不影响整体尺寸。
- 外边距折叠通过最大值而非总和来合并外边距，这很有用但令人意外；考虑使用猫头鹰选择器进行父级控制间距。
- 默认流式布局面向文档；使用flexbox进行空间控制。
- 响应式设计通常可以通过依赖HTML固有的回流和设置文本列的最大宽度来避免。
- CSS像素是视角单位，而非物理像素；以像素为单位的大小设置适用于各种显示器。
- 字体大小在不同字体间不一致；使用font-size-adjust进行标准化，并检查不同配置下的可读性。
- 行高在混合字体时可能导致意外偏移；它是行框的高度，而非字形高度。
- 垂直节奏（跨元素对齐行）对于单列布局通常是不必要的。
- 断词问题出现在长字符串（如代码或URL）中；使用技巧防止水平溢出。