CSS 优化选择器 CSS与JS

人只有献身于社会，才能找出那短暂而有风险的生命的意义。 ——<阿尔伯特·爱因斯坦>

TL; DR

选择器从右向左解释。

对于 CSS，最好使用 calss 而不是 id，因为第一个类可以比第二个类做同样的事情，甚至更多。为了提高代码的可伸缩性，您必须尽可能保持较低的专一性。

对于 JS，id 和高特异性将导致更有效的结果。你得直奔主题。但过于具体是没有意义的，会适得其反。

不要在选择器链中使用 通用选择器 *。

两者并不是互斥的，也不会阻止你的HTML是语义的:

<!-- HTML -->
<article id="main-article">
  <ol role="navigation" class="nav nav--block pagination">
    <li class="pagination__prev">
      <a href="/page1">&lt; Previous</a>
    </li>
    <li class="pagination__next">
      <a href="/page3">Next &gt;</a>
    </li>
  </ol>
</article>

/* CSS */
.nav {
  list-style: none;
  margin-left: 0;
}
.nav--block {
  line-height: 1;
}
/* Bad idea */
.nav--block \* {
  color: red;
}
/* Not a big deal */
* {
  box-sizing: border-box;
}

// Javascript (jQuery)
$('#main-article .nav--block .pagination**prev') // fast
$('#main-article .nav--block li.pagination**prev') // faster
$('#main-article').find('.pagination__prev') // super-fast

CSS

OOCSS原理的介绍https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/
另一种观点https://www.smashingmagazine.com/2012/06/classes-where-were-going-we-dont-need-classes/

class 还是 id ？

简而言之，从 CSS 的角度来看，一个 class 可以做任何 id 所要做的事情，但是 id 不能被重用
也就是说，我们可以使用 class 代替 id。
此外，标识符大大提高了声明的特异性。如果不适当使用 !importantHTML 或其他内联样式声明直接在 HTML 中覆盖所需的样式，这将使CSS变得一团糟。

<!-- Not really future-proof -->

<ol id="pagination">
  <li>
    <a href="/page1">&lt; Previous</a>
  </li>
  <li>
    <a href="/page3">Next &gt;</a>
  </li>
</ol>
#pagination {
  list-style: none;
  margin-left: 0;
  line-height: 1;
}

如果另一种分页类型出现在页面的其他地方，该怎么办?我们是否创建了具有相同属性的全新标识符?
然而，分页听起来像是某种导航，不是吗?

<!-- Future-proof -->

<ol class="nav pagination">
  <li>
    <a href="/page1">&lt; Previous</a>
  </li>
  <li>
    <a href="/page3">Next &gt;</a>
  </li>
</ol>
.nav {
  list-style: none;
  margin-left: 0;
}

.pagination {
  line-height: 1;
}

nav 类是完全可重用的。它是一个抽象层，它决定了网站所有导航菜单的公共属性。

特性

要编写过度指定的选择器，这会使规则不必要地繁重。

ol.nav {
} /* 0-0-1-1 useless specification */
article > .nav li a {
} /* 0-0-1-3 too specific! */
.pagination__prev {
} /* 0-0-1-0 OK */

这样做是为了产生高效的CSS，因为：

它与HTML上下文松散耦合（灵活性）
可以很容易地覆盖它（可扩展性）
另外，很容易弄清楚

使用Javascript

以jQuery为参考
document.getElementById() 可能是最有效的。
id 是最有效的选择器。选择器引擎找到元素后，它将停止其遍历 DOM的过程。id 的使用与Javascript有关，因为我们大多数时候都想处理精确的，已标识的元素。
: 在选择器中隔离 id，然后与查询函数链接以限制引擎范围，效率更高：

$('#main-article .pagination**prev') // fast
$('#main-article').find('.pagination**prev') // 2 times faster

$('ol.nav--block .muted') // not-optimized
$('.nav--block li.pagination__next a.muted') // not-optimized
$('.nav--block a.muted') // optimized