bootstrap哪些地方违背了分离原则？

Question

有些人批判bootstrap的设计，背离了语义跟表现分离的原则
可是没有举出具体的例子
谁能举个例子

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

在使用Bootstrap时，确实存在一些设计决策可能会导致与语义和功能分离的矛盾。下面是一些常见的场景：

1. 媒体查询（Media Queries）：虽然Bootstrap提供了多种媒体查询来改变样式，但这些媒体查询通常不会包含任何逻辑或功能相关的元素。例如，在一个响应式布局中，如果某个屏幕尺寸下的内容看起来不正确，可能是因为它没有考虑到其他屏幕尺寸的情况。

2. 类选择器（Class Selectors）：Bootstrap的类选择器非常强大，可以覆盖很多基础的HTML元素。然而，由于它们是基于类名的选择器，因此它们在某些情况下可能导致页面上的元素重叠或者布局混乱。

3. 伪类选择器（Pseudo-Classes）：伪类选择器允许你选择特定的元素状态，比如当鼠标悬停在某元素上、点击某按钮等。尽管这增加了灵活性，但也可能导致一些不必要的CSS重复。

4. 内联样式（Inline Styles）：虽然Bootstrap提供了一些内置样式，但在某些情况下，开发者可能会选择使用内联样式而非Bootstrap提供的样式。这种做法可能会使页面变得复杂，因为每种情况都需要不同的样式定义。

5. 自定义组件（Custom Components）：虽然自定义组件为开发人员提供了更多的控制权，但在某些情况下，这可能导致样式冲突。例如，一个自定义组件可能包含了多个复杂的样式属性，而这些属性可能会与其他部分产生冲突。

6. 嵌套样式（Nested Styles）：Bootstrap提供了许多内部样式，但如果你尝试在一个样式块中嵌套另一个样式块，这可能会导致样式冲突。

7. 响应式设计（Responsive Design）：虽然Bootstrap提供了一种强大的响应式布局解决方案，但它也有可能导致页面上的元素布局混乱，特别是当使用媒体查询时。

要解决这些问题，建议遵循语义化原则，确保每个元素都有明确的目的，并且只包含必要的功能。同时，避免过度依赖Bootstrap提供的预设样式，而是根据具体的需求和设计意图进行定制。