在前端开发、尤其是编写 HTML 和 CSS 时，我们经常会遇到类似 onethird 和 one-third 这样的命名。它们看起来意思相近，但在实际使用中却有明显差异。本文将从多个角度对比两者的不同。
one-third 使用连字符（kebab-case），符合英语书写习惯，语义清晰，易于阅读。例如，“one-third” 是标准英文表达“三分之一”的方式。
onethird 则是将单词连写（camelCase 或 snake_case 的变体），虽然简洁，但牺牲了自然语言的可读性，尤其对非母语开发者不够友好。
推荐写法（语义清晰）：
<div class="col one-third">...</div>
在 CSS 中，广泛推荐使用 kebab-case（即用连字符分隔单词）作为类名命名方式。这是因为：
font-size, background-color）使用 one-third（推荐）：
.one-third {
width: 33.33%;
}使用 onethird（不推荐）：
.onethird {
width: 33.33%;
}| 维度 | one-third | onethird |
|---|---|---|
| 可读性 | 高（符合自然语言） | 低（单词粘连） |
| CSS 规范兼容性 | ✅ 推荐（kebab-case） | ⚠️ 不推荐 |
| SEO / 无障碍支持 | 更好（语义明确） | 较差 |
| 团队协作友好度 | 高 | 中低 |
在绝大多数前端项目中，应优先使用 one-third 这类带连字符的命名方式。它不仅语义清晰、符合行业规范，还能提升代码的可维护性和团队协作效率。
而 onethird 虽然在某些特定场景（如变量名、内部逻辑）可能被使用，但在 HTML/CSS 类名中并不推荐。