关於使用 ID 及选择 CSS 选取器

学习 CSS 时知道尽量不使用 ID 来指定样式，因一个 ID 只能放在一个元素上，无法像 class 一样可以重复使用，也因 ID 权重较高，若要修改较难覆盖

看到这篇文章有探讨关於是否使用 ID 以及如何选择 CSS 选择器，让我对为什麽 ID 在 CSS 可能出现问题有多些了解，而不是只记住不使用 ID
原文为 Why IDs Can be Problematic in CSS

因目前都是自己练习网页，网页的规模都不算大，很多都还在体会中，或还没体会到 XD 这里就纪录几个文章部分内容节录：

使用 OOCSS 的方法以结构与样式分开、容器与内容分开为原则，可以减少许多重复的 CSS 样式，让规模较大的网页 CSS 较好维护，也因使用此方法，很少需要唯一一个地方设定唯一的样式，在这时候使用 ID 就可能产生需要覆盖样式的问题，因此在这个原则下避免使用 ID 是正确的
类似想规模化，就需标准化的概念，当网站越来越大，CSS 追求一致化的风格时，也会倾向使用重复性较高的 class，但有时会只鼓励避免使用 ID，但没有了解背後的原因，造成对 ID 的使用上不了解
在未有 HTML5 语意化标签，像是 <header> <main> <footer> 等，这时使用 ID 来让结构较有语意是可以的，例如 <div id=”footer”> … </div>，可以避免使用很多的 class 和 !important 来宣告样式，但现在几乎都已使用 HTML5 标签，加上许多元件化的样式，因此较依赖 class 指定样式
同时 ID 也具有「锚点」的功能，加上 id 的区块可以将网页的重点摘要，让使用者点击後可快速到达想阅览的部分，像是：点击 footer 的连结可跳至 footer 部分

<a href="#footer">footer</a> 

<footer id=”footer”> … </footer>

虽然无法写出同时可重复使用、一致化、易於维护又易读的 CSS（这听起来真的很难 XD）但是仍须往此方向努力，因此文章强调需思考自己专案的需求，来决定是否使用某种规则，而不是将一样的规则都套用在所有不同情况的 CSS 中

作者也分享如何选择较正确的 CSS 选取器，主要依照可维护性、性能、权重概念及解析 CSS 来思考要使用哪种选取器

可维护性可以思考更改内容需要花费多少时间及心力、新开发人员需要花多少时间熟悉、许多人同时开发时是否容易有冲突产生，在考虑可维护性的情况下，样式应该将尽量容易被覆盖修改
效能改善就能让使用者跳出率下降，提升使用者体验，达到 SEO 优化，因此是优化网站的主要目标，不过 CSS 选择器的性能优化会是较不重要的，因改善像是网页载入速度等其他地方会得到更大的效益，CSS 可以注意是否有像是引入 Bootstrap 框架的全部的内容，却只使用到少部分样式
也需注意权重的部分（ * < HTML 标签 < class < ID < lnline selectors < !impoartant )，权重的值分别为（ 0 < 1 < 10 < 100 < 1000 < 10000 ），若是权重分数相同时，後者会覆盖前者，在 HTML 中的 inline selectors，例如 <h1 style="color: #ffffff;"> ... </h1> ，会覆盖所有外部 CSS 档的样式，除了 !important，像是 * 全域设定或是属性值为 inherit，继承父元素属性的权重都是 0 分
因 CSS 解析过程会从最右到左读取选取器，因此 CSS 的阶层尽量不要太多层，选取器越少越好