Remove duplicate code

[pixcai]

貌似多余

[xcatliu]

不是多余的，如果没有这个的话，<form> 里面的 .btn-primary 会被 form button 覆盖

[xcatliu]

可以加行注释说明一下。

[xcatliu]

应该把他们写到一起来，节约空间。

.btn-primary,
.form .btn-primary {
}

.btn-danger,
.form .btn-danger {
}

[pixcai]

我是觉得不应该在form里再定义按钮的样式。按钮的样式应该是统一的，.btn，.btn-primary，.btn-danger就够了，单独定制.form button的样式，有点怪怪的。我的理解是控件的样式不应该依赖它所处的位置而改变。要是后面的设计中又增加了.btn-grey，.btn-big之类的，难道还要定义.form .btn-grey，.form .btn-big吗？这多麻烦？

[xcatliu]

我理解你的意思，我觉得主要是设计上的问题。下面是一些支持我这样设计的理由：

1. 我添加了 .form 样式，意在 .form 内部的东西都不需要再用额外的 class 了，如果 .form 内部的 <button> 还需要额外的添加 .btn，则不是很统一。
2. 如果在 <form> 中的 <button> 必须添加 .btn，那么是不是 checkbox 也需要添加 .checkbox 呢？是不是 <input> 也需要添加 .form-control 呢？

但是我这样设计也有弊端：

1. 就像你说的，.form 内部和外部的 <button> 不同了，使用中可能会产生困惑。
2. 代码有一些冗余。

我会再参考一下别的框架，思考一下如何解决这个问题。

[pixcai]

1、为<button>添加类要好一些吧，这样的做法才是比较统一。如果在.form里的元素不需要添加额外的类，这样会显得很另类。Bootstrap之类的框架好像没有这样的做法吧？

现在的问题是，.form里之所以要重载.btn-primary、.btn-danger，是因为.form里的button同样设置了颜色属性，导致最外层定义的样式被覆盖了。所以： 2、我认为比较好的做法是，只有改变元素的可视属性时（比如color, background,:hover等等），才需要添加额外的类。也就是说，.form button、.form [type=radio]这些只定义大小、位置和盒模型等属性，并不定义外观。

举个例子：

// 在基础样式中定义布局和外观
.btn-primary {
    padding: 4px 8px;
    text-align: center;
    color: white;
    background: blue;
}
// 特定类下重载盒模型属性，但不重载外观，外观通过类来表现
.form button {
    display: block;
    width: 100%; 
    padding: 5px 10px; 
}

使用：

<form class="form">
    <button class="btn-primary"></button>
</form>

也就是说，.form只关注它的子元素的大小和布局，而不在乎它是什么外观。这样的另一个好处是，可以方便自定义皮肤。.btn-primary { background: green; }所有的按钮都绿了，不然，按照你所说的，.form下的元素不添加额外的类，那.form button应该是蓝色的，而我自定义皮肤，还必须多此一举：.btn-primary, .form button { background: green; }

[xcatliu]

嗯，你说的有道理。

Bootstrap之类的框架好像没有这样的做法吧？

Pure.css 有 .form 但是内部的 <button> 还是需要 class="btn"

我认为比较好的做法是，只有改变元素的可视属性时（比如 color, background, :hover 等等），才需要添加额外的类。也就是说，.form button、.form [type=radio]这些只定义大小、位置和盒模型等属性，并不定义外观。

你的意思是 .form button 定义大小和位置 .btn 定义外观？

这样是有问题的，这样的话，在 .form 外部，就不能直接用 .btn 了（会失去大小和位置的 styles）。

唯一的做法是直接去掉 .form button 的样式，按钮的样式都写到 .btn 中。

我再考虑下，没问题的话下一版会改过来。

多些建议！

[pixcai]

这样是有问题的，这样的话，在 .form 外部，就不能直接用 .btn 了（会失去大小和位置的 styles）。

不会啊，我的意思是.btn本身是一个完整的按钮，只有在.form内部时，它的大小和位置才会被重载。比如：

.btn {
    padding: 4px 8px;
    text-align: center;
    color: #222;
    border-radius: 4px;
}

这是一个完整的按钮, 可以直接使用。不在.form内部时，它的大小和位置是不会受影响的。

只有在.form内部时，大小和位置才会受影响。

.form button {
    padding: 5px 10px;
}

<!-- 这个按钮padding不会被重载 -->
<button class="btn"></button>
<form class="form">
    <!-- 这个按钮padding被重载了 -->
    <button class="btn"></button>
</form>

这里的按钮大小和位置会被.form button重载，但外观不变。

[pixcai]

说到这里，我发现mobi.css好像跑偏了....本来不是关注flex布局吗？代码里出现.btn-primary，.btn-danger这样的类，已经不仅仅是布局了...

[xcatliu]

form 内部和外部的 btn 样式不应该一样吗？

[xcatliu]

没有跑偏，Mobi.css 不是局限于 flex 布局的，提供基础样式是它的一部分。