Html 如何在不使用SASS的情况下重构代码使其更加简洁？_Html_Css

Html 如何在不使用SASS的情况下重构代码使其更加简洁？

html css

Html 如何在不使用SASS的情况下重构代码使其更加简洁？,html,css,Html,Css,我用这个HTML制作了一个简单的注册表单。我是在这里正确地分离代码，还是有一些代码可以删除/更改表单在视觉上看起来不错，但是当我用CSS设计它的样式时，我注意到有很多东西需要重复 <body> <form action="#" class="form"> <div class="img-overlay"></div> <div class="icon"><i class="fas fa-times

我用这个HTML制作了一个简单的注册表单。我是在这里正确地分离代码，还是有一些代码可以删除/更改

表单在视觉上看起来不错，但是当我用CSS设计它的样式时，我注意到有很多东西需要重复

<body>
    <form action="#" class="form">
      <div class="img-overlay"></div>
      <div class="icon"><i class="fas fa-times"></i></div>
      <h1>Join our community of developers from all over the world</h1>
      <div class="form-box">
        <div class="email">
          <label for="email">email</label>
          <input id="email" type="email" placeholder="email" />
        </div>
        <div class="password">
          <label for="password">password</label>
          <input id="password" type="password" placeholder="password" />
        </div>
        <div class="password2">
          <label for="password2">confirm password</label>
          <input
            id="password2"
            type="password"
            placeholder="confirm password"
          />
        </div>
      </div>
      <input type="submit" class="button" value="Sign Up" />
      <p>Already have an account</p>
    </form>
  </body>

我觉得我在CSS中重复了很多代码，但我不确定我是否做得正确，即使我的代码创建了注册表单，并且从美学上看一切都很好

您可以将一些类添加到元素中，并将常用样式放在其中。具有

id

的元素可以具有

类

甚至多个类，而不会出现任何问题。

实用类 1样式在

css

中重复使用多次
html

在
css

。文本为橙色{ 颜色：橙色 }

在
html

Lorem 洛雷姆

1在
css
中的一组样式在
html

在
css

.flex col center start{ 显示器：flex；弯曲方向：立柱；证明内容：中心；调整项目：灵活启动； }

在
html

box1 框2

这与使用、或的方式相同

因此，您可以通过构建自己的库来减少大量代码

但您最终也会在
html
中添加一些类名

请注意，Tailwind与上述方法非常相似，不同之处在于，Tailwind已经为您定义了这些粒度样式。因此，您也可以使用顺风来减少代码

使用实用程序类而不向
html

如果您仍然希望以这种方式重用代码，而不向
html
添加任何实用程序名称，则可以尝试使用sass->
@extend
函数，您可以查看此示例

随着时间的推移，您的css将变得越来越瘦-别担心。你的方法会随着实践而出现
一些非常快的胜利：
1）不要不必要地重新声明值

.button { width: 100%; border-radius: 30px; padding: 14px 14px; } .button:hover { width: 100%; border-radius: 30px; padding: 14px 14px; }
我只选择了三个作为例子——但悬停状态将保留宽度、边界半径和填充。仅在此处声明要更改的内容
2）在合理的地方将规则分组

.email, .password, .password2 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
就个人而言，我会避免创建实用程序类。您的标记可能会变得杂乱无章：

<a class="btn btn-large btn-primary btn-a-million-other-classes-that-have-to-be-removed-in-your-markup-if-your-client-changes-their-mind">Click</a>
然后，在您想使用它的任何时候：

.email { @extend .flex-center; }

声明一次实用程序类，应用一次，取下一次，在全球范围内。
Code Review是Stack Exchange网络上询问有关代码改进等问题的最佳问答网站。。。在这里访问它：比如class=“form\u input email”，然后class=“form\u input passwordl”等等。？你能复制我的代码笔并编辑你所指的标签吗？或者这是我唯一能做的使代码更简洁的事情吗？聪明的
class
策略很可能就足够了。你也可以玩玩，但我认为在你的情况下没有必要。啊，谢谢你的建议。我不知道悬停状态会保留这些值，我意识到我可以将输入分组在一起。就Sass而言，这只是我为了好玩而做的一个小项目，只是在测试我目前的知识
.flex-center { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }

.email { @extend .flex-center; }