不理解button组件这个css为什么这样写..建议取消..

[zhezzma]

.tiny-button+.tiny-button {
  margin-left: 8px;
}

大概的意思是两个button如果相邻,则margin-left: 8px;
真的有必要吗?这种默认的形式应该用户来控制...
写组件的时候,要恪守单一原则..只处理自己的事情..
写button组件,只要负责button本身的样式就可以了呀!

比如这个如果我在两个button的外层使用flex,flex-col..竖排显示按钮,然后就会造成第二个按钮,有偏移

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Title: I don’t understand why the css of the button component is written like this.. It is recommended to cancel..

[shenjunjian]

.tiny-button+.tiny-button是一个常用技巧，　比如弹窗中的确认了取消按钮，　会自动添加了一个边距
防止２个按钮紧挨在一起。　　

组件库里，到底应该不应该有这种样式，　确实是需要讨论的一个点。　像你的使用场景，　就会带来问题。

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

.tiny-button+.tiny-button is a common technique. For example, if you confirm the cancel button in the pop-up window, a margin will be automatically added.
Prevent 2 buttons from being placed next to each other.​

Whether there should be this style in the component library is indeed a point that needs to be discussed.Usage scenarios like yours will cause problems.

[zhezzma]

.tiny-button+.tiny-button是一个常用技巧，　比如弹窗中的确认了取消按钮，　会自动添加了一个边距 防止２个按钮紧挨在一起。　　

组件库里，到底应该不应该有这种样式，　确实是需要讨论的一个点。　像你的使用场景，　就会带来问题。

如果是弹窗的话..那就是弹窗下.dialogue .tiny-button+.tiny-button 而不是全局使用

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

.tiny-button+.tiny-button is a common technique. For example, if you confirm the cancel button in the pop-up window, a margin will be automatically added to prevent the two buttons from being close together.​

Whether there should be this style in the component library is indeed a point that needs to be discussed.Usage scenarios like yours will cause problems.

If it is a pop-up window, then use the .dialogue .tiny-button+.tiny-button under the pop-up window instead of using it globally.

[zzxming]

button 作为行级块元素默认单行排列，所以这样处理是没有问题的，你这种纵向排列的情况才是需要特殊处理的

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

As a row-level block element, button is arranged in a single row by default, so there is no problem in handling it this way. It is your case of vertical arrangement that requires special handling.

[lisonge]

关键在于，没有提供一个可供用户关闭的选项

很多产品 ui 设计都是自己内部定义的 gap

每次遇到这个都很烦

---

框架要改可以参考

.tiny-button+.tiny-button:not(no-gap) { margin-left: 8px; }

用户手动改，直接在两个 button 之间插入一个

<div v-show='0'/>

破坏相近兄弟关系，这样 CSS 匹配不上就不生效了

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

The key is that there is no option for the user to turn it off

Many product UI designs are gaps defined internally.

It's annoying every time I encounter this

---

If you want to change the framework, you can refer to

.tiny-button+.tiny-button:not(no-gap) { margin-left: 8px; }

The user manually changes it by inserting one directly between the two buttons.

destroys the close sibling relationship, so that if the CSS does not match, it will not take effect.

[zhezzma]

你这是写了一个bug，然后让用户在修改你这个bug？
所以你为什么要这样写呢？
单一原则。每个组件只负责自己的事情不就好了。
那我再问一个实际的问题，需要你这样写的组件到底有几个？？所谓的通用不过是想象中的东西。
你这是写组件写最基本的东西，要避免的就是不要污染，产生莫名其妙的东西。

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

I don't understand what you are talking about at all.
You wrote a bug and then asked users to fix the bug. .
So why do you write it like this?
Single principle. Wouldn't it be nice if each component was only responsible for its own thing?

[lisonge]

你这是写了一个bug，然后让用户在修改你这个bug？

虽然但是，element-plus 照样有这个 https://github.com/element-plus/element-plus/blob/0b87b9f033af6d1e7d2f69f04181fdc89648d074/packages/theme-chalk/src/button.scss#L71 而且不可修改

这玩意就是一套抄一套

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Are you writing a bug and then letting users fix it?

Although, element-plus still has this https://github.com/element-plus/element-plus/blob/0b87b9f033af6d1e7d2f69f04181fdc89648d074/packages/theme-chalk/src/button.scss#L71 and it cannot be modified

This thing is just copying one set.