5 种方法让你的 CSS 水平飞速提升

大家好，我是 Enzo！

没有太多文章讨论如何提高 CSS。

同时，这是前端的一个重要支柱，你需要擅长 CSS，没有办法……

因此，让我们通过向您展示 5 种大幅提高 CSS 技能的方法来解决这个问题！

1.创建组件

组件是可复用的代码片段。
以下是一些您可以复用的知名组件：

• 牌
• 输入（日期选择器、拖放、单选按钮、文本区域...）
• 按钮（确实，这是最常见的组件！）
• 面包屑
• 菜单（导航栏、垂直、水平、动画等...）
• 工具提示
• 分页
• 滑块（您可以使用纯 CSS 滑块，或者只使用一点 JS 即可使其工作）

好吧，我不会列出所有类型的组件，但你可以通过谷歌搜索“UI 组件列表”轻松找到最常见组件的列表。
然后尝试使用 CSS 复制它们！🔥

2. 尝试使用 Flexbox / CSS Grid

当涉及放置元素时，这两个工具真的非常方便，您需要熟记它们，尤其是适用于它们的小规则。

为了训练您的 Flex/Grid 技能，您可以构建：

• 一个画廊，简单或解构（或两者兼而有之！）
• 导航栏
• 几行代码就能完成博客布局
• 创建令人惊叹的部分，例如 flexbox 动画面板。
• 一切都需要响应（确实如此）

3. 构建单页响应式网站

简单来说：

• 导航栏
• 主页
• 一些部分（服务、联系方式、定价、关于我们……）
• 它需要完美响应

4. 以 CSS Grid 为架构构建网站

这里你需要用 CSS 网格构建整个网站结构，可以是单页，也可以是多页，随便什么都可以。
当然，你也可以在这些网格中使用 Flexbox！

5. 使用 SASS 构建多页网站

好的，最后的 Boss，这里的目标是：

• 使用 SASS 构建良好的文件夹结构。
• 使用扩展/占位符。
• 巧妙地使用 mixins（带参数）。
• 创建并使用变量。

就这样吧，伙计们！

您可以在 YouTube 上找到我，讨论前端开发（警告，它是法语！）。

YouTube：https://www.youtube.com/c/TheWebSchool

保重，下次再见。✒️