不使用 bootstrap/bulma/materialize 等框架时如何开始构建自己的 css

Posted 2023-02-23

【中文标题】不使用 bootstrap/bulma/materialize 等框架时如何开始构建自己的 css

【英文标题】：How to start structuring your own css when not working with a framework like bootstrap/bulma/materialize

【发布时间】：2018-10-21 16:49:48

【问题描述】：

我正在开始一个新的 Angular 项目，并决定不使用像 bootstrap/bulma/materialize/这样的框架，而是编写我们自己的 sassy 组件库。

我做了一些研究，但老实说，我真的不知道从哪里开始（除了 css 重置）。我还是一名大三学生，已经在以前的现有项目中研究过一些功能。现在我必须开始新项目的前端，并希望构建尽可能结构化和可重用的所有内容，但我有点迷失从哪里开始。

当您开始编写自己的作品时，您的行动计划是什么？ 你如何构建你的角度组件库？ 你有没有看过关于这方面的好教程，我一定也应该看看？

【参考方案1】：

在我看来，这不是一项简单的任务。但是您可以从使用SCSS 开始，这将使您可以广泛地访问术语可重用性。此外，您可能需要在 flexbox/grid-layout 上工作（如果您需要支持 IE 11 及更低版本的旧浏览器，则不是这种情况）来实现一些样式化的组件。通过 scss 和 'flexbox` 的组合，我认为大多数组件都可以简单地创建并以您想要的方式重用。

我强烈建议避免使用库，而是编写我们自己的代码。因为那时我们将拥有的力量是无限的。拥有它你会感到惊讶。

但同时，如果该项目是一个长期运行的项目，并且您的需求正在进行中，那么我建议您重新考虑取消像 'bootstrap、materialize 这样的库。否则，如果需求随时间变化，您可能需要使用许多库来实现您可能需要的功能。 （经验是最好的老师）

【讨论】：

简要说明：Internet Explorer 11 支持 flexbox 但不支持网格布局。这没有回答问题。您是在建议使用哪个 css 编译器，并鼓励用户编写自己的 css，但没有关于如何构建 css 本身的任何内容。

【参考方案2】：

迄今为止，在我的大部分项目中，我都没有使用框架并编写了自己的 CSS 库，我会推荐它。我对 Angular 没有任何经验，只有 React。我只能与您分享我目前的设置。

我使用 gulp 将 SASS 文件编译成 main.css 文件和 BEM 方法（您也可以查看 SMACSS）。每个“块”（由 BEM 定义）在布局或模块中都有一个单独的文件。

我将我的 SASS 文件分离到以下文件夹中：

Base - 用于 - 重置 /Grids/helpers/typography/base（一般基本样式，例如 wrap） 布局 - 用于容器 - 页眉/页脚/侧边栏等 Lib - 用于混入 模块 - 用于组件 - 表单/按钮/警报/图标/手风琴等 设置 - 颜色/字体/响应式 - 用于设置要在所有其他文件中使用的 sass 变量。

我希望这会有所帮助。