CSS Reset 与 CSS 框架哪个更适合项目开发？-FunTeaLearn Online Web Tutorials

前言

在前端项目的开发中，CSS 是不可或缺的一部分。无论是用来美化页面、调整排版，还是实现交互效果，我们都离不开 CSS 的帮助。

然而，在实际的开发过程中，我们可能会遇到这样的问题：样式不统一，不同浏览器下显示效果不同，甚至出现兼容性问题。

为了解决这些问题，我们常常会采用 CSS Reset 或 CSS 框架。它们能够帮助我们规范样式、解决兼容性问题，提高开发效率。但是，CSS Reset 和 CSS 框架到底哪个更适合项目开发呢？本文将一一解答。

CSS Reset

CSS Reset 是指在编写样式前，先将浏览器的默认样式全部重置，以达到让不同浏览器下的页面显示相同的效果的目的。

使用 CSS Reset 可以帮助我们建立一个统一的初始化样式，从而使得后续添加的样式更加规范和一致。同时，它还能够避免被浏览器默认样式所干扰，帮助我们更好地实现自己设计的样式效果。

以下是一个简单的 CSS Reset 样式示例：

// www.javascriptcn.com code example
/* 常用元素的默认样式重置 */
html, body, p, ul, li, h1, h2, h3, h4, h5, h6, form, input, textarea, button, img {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
}

/* 链接样式重置 */
a, a:hover, a:visited, a:active {
        text-decoration: none;
        color: inherit;
}

CSS 框架

与 CSS Reset 相比，CSS 框架则提供了一个基础的样式框架，包括一套规范的样式、布局、组件等，可以快速构建出一个美观且具备交互功能的页面。

目前比较流行的 CSS 框架有 Bootstrap、Foundation、Semantic UI 等。它们不仅提供了一个统一的样式规范，还提供了丰富的交互组件和布局样式，可以极大地提高开发效率。

以下是一个使用 Bootstrap 搭建的基本框架示例：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    <!-- 引入 Bootstrap 样式文件和 JavaScript 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <!-- Bootstrap 布局容器 -->
    <div class="container">
        <!-- 导航栏组件 -->
        <nav class="navbar navbar-default">
            <!-- 导航栏标题 -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Bootstrap</a>
            </div>
            <!-- 导航栏链接 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">文档</a></li>
                    <li><a href="#">组件</a></li>
                </ul>
            </div>
        </nav>
        <!-- 内容区域 -->
        <div class="jumbotron">
            <h1>Hello, world!</h1>
            <p>这是一个有趣的 Bootstrap 网站。</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a></p>
        </div>
        <!-- 页脚 -->
        <footer>
            <p>&copy; 2021 Bootstrap</p>
        </footer>
    </div>
</body>
</html>

适用场景

那么，在实际开发中应该如何选择 CSS Reset 和 CSS 框架？以下是相应的适用场景：

适用场景 1：开发原型/快速原型开发

在开发原型/快速原型时，使用 CSS 框架可以大大提高开发效率。因为框架已经提供了一套标准的样式和布局，我们只需要按照框架提供的规范进行开发，即可快速构建出一个基本的页面。

而如果使用 CSS Reset，需要自己手动编写每个元素的样式，比较繁琐且浪费时间。因此，对于快速原型开发，建议使用 CSS 框架。

适用场景 2：需求复杂，组件丰富

如果需求比较复杂，需要使用很多组件，并且需要自定义样式，那么建议使用 CSS 框架。因为框架提供了丰富的组件和样式，我们可以在此基础上进行自定义，满足实际需求。

而如果使用 CSS Reset，需要自己手动编写每个组件的样式，这样成本较高，且难以保证样式一致性。因此，在需要使用很多组件，并且需要自定义样式的情况下，建议使用 CSS 框架。

适用场景 3：需求简单，自定义样式少

如果需求较为简单，不需要使用太多组件，并且需要进行较少的自定义样式，那么建议使用 CSS Reset。因为这样可以提高网页加载速度，并且能够避免框架文件的负担，同时编写自己的样式非常方便。

当然，这并不意味着你完全不需要框架。如果你需要使用一些特定的组件，而且找不到更好的替代方案，那么使用 CSS 框架也是完全没有问题的。

总结

综上所述，CSS Reset 和 CSS 框架在项目开发中都有各自的优劣。我们需要根据实际需求，选择合适的工具来提高开发效率。

如果需求比较简单，自定义样式少，建议使用 CSS Reset；如果需求比较复杂，需要大量组件并且需要自定义样式，建议使用 CSS 框架。

最后，无论是使用 CSS Reset 还是 CSS 框架，我们都需要掌握基本的 CSS 技术和规范，才能保证我们的项目能够顺利进行。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64c537c8d20074f47a45e032

CSS Reset 与 CSS 框架哪个更适合项目开发？

前言