Question

我正在开发一个asp.net webforms项目。我对CSS很满意，可以用它编写复杂的样式。我面临的问题是如何最小化创建的类的数量或有效地重用现有的类。例如，每个页面需要在某个地方显示几个div，很快我将为不同的页面创建太多的类。我本可以通过使用bootstrap避免这种情况，但我的项目不允许使用bootstrap。以下是我必须用于一个小页面的CSS示例。

 <div style="padding-top: 10px; padding-left: 300px; padding-bottom: 50px; " ><asp:button id="btnAssociae" ToolTip="Associate" runat="server" Text="Associate" onclick="btnAssociate_Click"></asp:button></div>
    <div style="margin-left: 65px; border-bottom: 1px solid"></div>
    <div style="padding-top: 50px; padding-left: 60px; " ><span style="padding-right: 90px">Delete</span><asp:button id="btnDelete" runat="server" Text="Delete" onclick="btnDelete_Click"></asp:button>
    </div>

可能有一个想法是使用百分比而不是px。任何建议将不胜感激。注意：随附的代码示例显示了内联CSS，我最终将其转换为类。

Answer 1

您可以尝试使用BEM方法。例如，这里有一些描述：http://getbem.com/ 我每天都在使用它，样式表更容易维护。

一些基本的好实践： - 制作通用类，例如：.container，其中包含页面上所有部分的默认填充/边距

助手 - classess喜欢＆＃39; align-left＆＃39;或者＆＃39; text-white＆＃39;只有一个参数，所以你可以通过添加类而不是通过创建新的类来创建不同的样式
尝试使用Sass / LESS - 使用它们创建代码比在正常情况下更容易创建代码＆＃39; CSS。您还可以将样式拆分为较小的文件并将其命名为＆＃34; buttons＆＃34;哪些类只用于按钮等等
使用像素是可以接受的，但是＆＃39; em＆＃39;或者＆＃39; rem＆＃39;在某种程度上更好。百分之百可能很棘手，特别是对于RWD
Flexbox是垂直/水平div定位的绝佳工具

Answer 2

是的，我同意乌拉。 BEM非常适合缩小课程数量。另外，仅仅因为你的项目不允许使用bootstrap并不意味着你不能采用他们的方法并自己构建一些东西。 Bootstrap只是一个可以安装的实用程序类库，为什么不创建一个名为tools.css的单独样式表，并定义一些可以在整个项目中重用的实用程序类。

另外，我不能同意使用SASS来解决问题。如果您觉得自己已经准备好学习新东西，那么它就是编写简洁风格的绝佳工具。 learn more about placeholders - ＆gt;这是一个很好的学习资源。

如何最小化创建的CSS类的数量？

2 个答案: