Javascript css：更改规则集与使用选择器切换类/应用样式

最近我想知道编辑元素样式不是通过在dom上切换它们的类，而是通过更改css类或选择器的实际规则集。 所以不是像这样

$('.some').hide()

或

为什么不直接用

document.styleSheets

之类的东西修改规则呢？ 当我们让浏览器以本机方式处理规则集更改时，这种方法是否通常会更高效（至少对于许多元素而言）

例如，您可以将样式添加到

。一些
，例如
显示：无和所有
。一些
元素将立即被隐藏。无需迭代js中的所有这些元素并手动隐藏它们（如上面的示例）

直接更改规则集更有可能鼓励使用上下文感知的类（或者您将其称为…），因为您会隐藏所有
#persons>.item
或其他内容

我仍然不知道关于使用上下文命名的类的最佳实践，例如控制名称，如
.calendar
.ticket
.item
，而不是单个功能类，如
.hidden
.left
.green
，因为我通常需要这两种类型的约定

我只是想问您对此有何看法，修改样式表方法与jquery之类的库如何处理更改的样式相比有哪些优点和缺点

另外，你认为什么是好的实践，你认为什么更像是一个黑客

cough javascript和hacking cough
操作
文档。样式表
由于实现不同，并且缺少规则选择器API，因此操作起来很棘手。当前，如果要在样式表中操作规则，必须执行以下过程：

迭代document.styleSheets
迭代当前样式表对象中的规则
如果规则与我们的类匹配，请编辑规则样式

然后是级联问题。您如何知道您匹配的规则上的特定样式不会被页面样式表中的其他规则覆盖？如果您只是在更改找到的第一个匹配规则后退出，则无法确保您设置的样式将实际应用于元素，除非您坚持使用
！重要提示
，这会给您带来完全不同的问题

即使您已经操作了样式表规则，浏览器仍然有相同的工作要做，它必须通过应用级联来重新计算所有样式

所以，现在操纵
样式表
看起来不太吸引人，是吗？相信我，坚持换班。使用jQuery和现代API，如
querySelectorAll
可以大大提高速度，而浏览器仍然可以完成所有繁重的工作，如重新计算样式值
 这样一个棘手的问题：(

但如果以样板为例，它有一些标准类可供使用，如：

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: ; position: absolute; width: 1px; }

 /* Hide visually and from screenreaders, but maintain layout */
 .invisible { visibility: hidden; }

需要技巧的是，如果它是因为JS而需要隐藏的东西，那么你应该只使用JS来隐藏它。如果JS被禁用，它就会正常工作。
如果它不是依赖于JS的，那么可以将其隐藏在HTML中

因此JS function=hide with JS（通过使用JS或添加隐藏类）

基本HTML隐藏=使用HTML类隐藏

样式切换与JS切换

基本上，JS切换为您提供了添加效果等的机会，只是使用预定义的类在某种程度上限制了这一点。但希望看到一些ressource比较：）
没错。但是，如果你通过代码添加一个样式表，你有对它的所有引用，如果它是最后一个/最新的样式表，它基本上会覆盖其他样式。那么，把迭代部分去掉，让js在自己的样式表中创建自己的规则怎么样。。。都用一个漂亮的api包装了吗？@sharpjohnny:这不值得。如果你要这样做，你也可以直接将样式添加到每个元素中，这样你就不会和层叠抗争了。可以通过操纵元素的
className
属性来添加/删除类——一旦你完成了这项操作，浏览器就会接管并完成比JavaScript快得多的工作。
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: ; position: absolute; width: 1px; }

 /* Hide visually and from screenreaders, but maintain layout */
 .invisible { visibility: hidden; }