当我们开始写前端代码时，我们需要遵循一些基本样式。 但是，每个浏览器都有自己的默认样式，这可能会导致浏览器之间的显示差异。为了解决这个问题，我们使用 CSS reset。
CSS reset 是一组约定俗成的 CSS 规则，用于清除浏览器默认样式并建立通用样式。 但是，CSS reset 会导致默认 widget 样式问题，如何解决呢？这篇文章将提供一些解决方案。
问题描述
当我们重置了浏览器默认样式后，部件元素（如 input、button）也被重置了。因此，我们必须手动定义它们的外观和行为。下面是一个示例：
<input type="text" name="username">
-- -------------------- ---- -------
------------------ -
-- ------------ --
------- --
-------- --
-- ---- --
------------ ------ -----------
---------- -----
-- ------- --
----------------- --------
------- --- ----- --------
-- ------- --
------ ------
------- -----
-- ------ --
------- -----
-- ------ --
-------------------- -----
----------------- -----
---------------- -----
------------ -----
-通过上面的 CSS 代码，我们已经把 input 元素完整定义出来了。如果我们要用到不同类型的部件，例如按钮，选择框等，我们需要定义其外观和行为。
这是个极具挑战的过程，不过随着经验不断增加，我们会更加熟练。 下面是一些有用的提示。
提示
1. 使用全局样式
可以为元素添加全局样式，使其在整个应用程序中保持一致。这需要使用类选择器，这样可以精简代码并降低维护成本。
例如，我们可以使用以下代码来定义所有输入元素的样式：
-- -------------------- ---- ------- -- ------------- -- ------ --------- ------ - -- ------------ -- ------- -- -------- -- -- ---- -- ------------ ------ ----------- ---------- ----- - -- ---------- -- ------------------- -------- - ----------------- -------- ------- --- ----- -------- - -- ------- -- ------ - ----------------- --------------- ------------------ ---------- -------------------- ----- ------- -
2. 使用现成的库
有很多现成的库提供可以使用的预定义样式。
例如，Bootstrap 是最受欢迎的 CSS 库之一，它提供了许多美观现代的样式，包括按钮、表单元素和其他部件。
3. 充分利用 Cascading
Cascading 是 CSS 中一种非常强大的功能。 可以使用特殊标记（如 #、. ）或伪类（如 :hover）强制套用特定规则。
例如，为所有带有 "required" 类别标记的输入元素添加背景颜色：
/* 添加必填字段的背景颜色 */
input.required,
textarea.required {
background-color: #F8E9E9;
}4. 注意细节
在使用自定义部件样式时，要注意思考尽可能多的细节。例如，确保在适当的设备上正常工作并遵循无障碍设计原则 。除了常见的控件外，我们还需要考虑较少使用的控件，例如 进度条、日期选择器等。
结论
CSS reset 与出现默认 widget 样式问题不一定是两条不同的路线。 反之，它们是相对的问题，需要在我们的代码中建立最佳实践。
使用全局样式、预定义库、强制Cascading 命令以及关注细节等技巧都是解决默认部件样式问题的好方法。最后，通过不断地学习和实践，我们可以成为一位熟练的前端开发工程师。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67022217d91dce0dc8469294