Question

我的样式语言使用较少。让我从我的应用程序的当前状况开始，这样问题就不会从无处不在。

在我的index.js文件中，使用以下行加载“ ant.d”的样式：import 'antd/dist/antd.css'。我正在使用该文件而不是.less文件，因为我仍然需要使最后一个文件与“笑话”一起工作，但这是一个不同的问题。因此，通过这种方式，我的项目可以正确设置“ ant.d”元素的样式。

然后我有一个文件app.less（在此示例中，我正在重命名一些东西以使其更通用），该文件在加载“ ant.d”样式之后添加。该文件以以下代码开头：

@import './variables.less';
@import './ant.overrule.less';

这也可以。因此，我的变量可用于我的初始应用程序样式类（每个组件的文件数有所不同，但现在是无关紧要的）。在ant.overrule.less文件中，我可以更改“ ant.d”类。像这样的东西：

@import './variables.less';

// Form
.ant-form-item {
    margin-bottom: 0;
}

// Input
.ant-input {
  padding: 16px 12px 2px 11px;
  font-size: @font-size-field;
}
.ant-select .ant-select-selector {
  padding: 16px 10px 4px 11px;
}
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
  padding: 16px 10px 4px 11px;
  height: 48px;
}
.ant-select-single .ant-select-selector .ant-select-selection-search {
  top: 16px;
}

现在我不太喜欢这种方法。表单项下边距有大量可用的变量，例如@form-item-margin-bottom。我不知道命名与用法的结合程度如何（因此，此处的示例未用于表边距）。我也不喜欢将所有变量都放在webpack配置中。

因此，我将ant.overrule.less文件（我可能会更改了此名称）更改为：

@import './variables.less';
@import '~antd/lib/style/themes/default.less';
@import '~antd/dist/antd.less';


// Form
@form-item-margin-bottom: 0;

// Input
.ant-input {
  padding: 16px 12px 2px 11px;
  font-size: @font-size-field;
}
.ant-select .ant-select-selector {
  padding: 16px 10px 4px 11px;
}
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
  padding: 16px 10px 4px 11px;
  height: 48px;
}
.ant-select-single .ant-select-selector .ant-select-selection-search {
  top: 16px;
}

现在只是一个小小的更改，我改用定义变量而不是调整类，并按照文档中的说明导入了.less文件。重要提示：我也确实删除了.css文件的导入。

因此，在进行了详细说明之后，我得到了一个问题：否决样式类的最佳实践是什么。我确实认为在某些情况下，您可能会像上面的示例一样添加类定义。可以那样做吗（在这种情况下，还是添加那些来制作float标签），或者您可以向该元素添加一个新类。我应该将整个变量列表放入我的规则中吗？如果没有记错的话，则不需要这样做，因为只有在我更新软件包时，才需要检查其新/不同。

我现在正在做什么：

只有在那种情况下我想要不同的样式时，我的组件和元素才会以我自己的前缀开头的类
当我不喜欢默认值（例如下边距）时，我会搜索变量，因此它随处可见
variables.less中定义了所有颜色，字体系列和某些字体大小，因此在以后的阶段中，我也许可以轻松地使用它来具有特定于实体的颜色（将来）。

感谢阅读和思考。

减少使用ant.d默认样式的样式的最佳做法

0 个答案: