现在很少有人从头开始设计网站设计-为什么，如果有一堆很棒的CSS框架？ 其中最受欢迎的是引导程序。 尽管如此，每个人都希望该网站看起来独特，而不是其他网站-这就是为什么他们通常会（尽其所能）坚持使用免费或付费的模板或自己的UI套件。
我想谈谈即使在付费模板中也会（不幸）出现的一些问题，更不用说我的解决方案了。 下面的文字并不声称是唯一的，有经验的开发人员不太可能会感兴趣，但对于初学者前端开发人员，布局设计师和基础广泛的Web开发人员而言可能很有用。 因此，如果您仍然有兴趣，欢迎您！
从历史上看我们...
通常，如果站点已开发很长时间，则其外观要求会定期更改。 如果除此之外，程序员定期对其进行更改，那么代码（在我们的示例中为CSS）将变成一团糟。 在某个地方的引导程序类，有时是模板类，所有这些都被几代布局设计师的拐杖所稀释，并具有内联样式。 尝试更改某些内容或添加新内容会导致长期的魔术游戏“猜测您需要在此html块中放置什么类！”。 我想扔掉所有内容，然后从头开始重写它。 但是实际上，在这里，我只是想快速向表单中添加新字段，后端有足够的任务...实际上，在第一个示例中，我们将考虑促使我撰写本文的原因。
输入尺寸
因此，我们有一个表单元素的标准视图，我们希望对其进行一些更改，例如降低高度。 有什么方法可以使输入与UI鲸相对应？
您可以插入内联样式！ 这将非常有趣-然后将所有这些鞋布复制到每个输入中！有人会笑，但我经常看到这样的决定。 幸运的是，在这种情况下并没有。 如果我们这样做会怎样？ 您将不得不将长样式说明复制到每个输入中，从而使模板膨胀并使可读性降低。
让我们编写我们自己的类，在其中我们将描述必要的高度设置，同时更改字体大小！是的 是他 “ H40_px-16。” 从班级名称中，您可以立即清楚其功能 当我试图理解为什么新的输入比必要的要厚时，我遇到了这样的事情。 我查看了同一模板中的代码，并找到了它。 在这种情况下，有什么后果等待着我们？ 原则上，没有什么关键的。 在每一类表单元素中，除了“ form-control”之外，我们还将添加“ h40_px-16”。 需要记住或记录。 并且是否需要使用绿色背景来处理表单的所有元素？ 只需添加另一个类“ b_g”。 然后再...
扩展表单元素的现有类？尽管在我看来它是表面上的，但很少看到这种解决方案。 我认为-最正确。 这使我们可以节省元素中需要指定的类的数量，但是最重要的是，它减少了尝试使用此代码的开发人员之间的困惑。 如果所需的更改影响此类型的所有元素，我们只需为“表单控件”添加我们自己的规则集，并且所有输入都会更改其高度，字体，背景等。
定制解决方案
根据UI鲸鱼，您需要在网站上添加前所未有的创新解决方案！ 它是从头开始编写的。 真的吗 不，如果您使用pureCSS（一个很好的但极简的框架），并且需要实现其中未包含的内容，那么我可以允许这样做。 但是，如果您使用引导程序-极有可能只需要重新阅读文档。
让我们看一个极端被忽略的情况，在该情况下网站具有自己的徽章实现。 与引导程序连接。 因此，一位不参与创建这些徽章的开发人员需要将其添加到网站上的某个位置。
- 首先，他查看引导程序文档，然后从中复制解决方案。
- 看到这与UI鲸鱼不符，他正在寻找有关所使用的创新解决方案的文档。
- 如果该文档不是（很可能不是），他将在代码中搜索如何实现此示例。
- 复制了所需的beijik类之后，他看到徽章现在是正确的，但是是蓝色，并且他需要红色。
- 找到描述鲸鱼用户界面类的css文件后，它检测到未放置红色，叹气后添加类“ beijik-red”
现在，将其与为自己的徽章实现重新定义徽章类并在文档中描述了颜色实现的情况进行比较：
- 首先，他查看引导程序文档，然后从中复制解决方案。
- 该文档找到如何添加红色：徽章红色
在这里，我们研究了一个示例，该示例不仅需要更改现成的解决方案，而且还必须对其进行扩展，因为我们对开箱即用的功能不满意（bootstrap3中的徽章没有自定义颜色）。 在这种情况下，都是一样，最好的解决方案仍然是覆盖现有类，只有在此之后，才添加自己的类。
当然，我给出的示例非常精致，但是我确实遇到了这样的情况：首先在引导文档中寻找解决方案，然后在网站上使用该模板的文档中寻找解决方案（很幸运，有文档供其使用），然后我在其中找到css文件以及如何重新定义标准行为以及如何实现类似物-但最终我编写了自己的样式，以返回（！）最初的可能性。
如果您不想伤害您的同事并希望加快整个团队的工作速度，那么在为网站创建自己的样式时请遵循以下规则：
- 检查在使用的框架中如何实现必要的功能（您记得-最有可能在此处）。
- 查找需要重新定义哪些类才能使外观具有所需的外观。
- 如果功能尚未实现或未完全实现-与同事协调，以方便的方式扩展功能，并尝试在将来进行记录。
- 如果不是所有地方都需要该功能，而仅在特定页面上需要-将其放在单独的文件中并连接\为其收集（请没有内联样式）
后记
以上都是我个人的看法。 我不是专业的前端开发人员，在添加一些新功能时，我通常会遇到html和css-对我来说，立即配置正面和背面，然后将其组合以进行设计更加方便。 如果您的团队已经建立了流程，描述了好的代码规则，为所有开发人员编写了指南，并且所有内容都经过了代码审查-您可以嘲笑这篇文章，我不会介意的。 如果这篇文章对某人有用，那么我提出我的困惑想法并不是徒劳的。