Re: [csswg-drafts] [css-backgrounds] 'border' shorthand resets 'border-image' but can't set it from Amelia Bellamy-Royds via GitHub on 2017-12-20 (public-css-archive@w3.org from December 2017)

From: Amelia Bellamy-Royds via GitHub <sysbot+gh@w3.org>
Date: Wed, 20 Dec 2017 23:07:28 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-353209227-1513811246-sysbot+gh@w3.org>

Here's a use case for the other side of the equation:

In my design system, I have a class `big-warning-button`. It applies a very large red border:

```css
button.big-warning-button {
  color: dakrRed;
  background: lightSalmon;
  border: solid 5px;
}
```

But then, someone down the line changes the theme styles for default buttons to use a `border-image` instead of a regular border:

```css
button {
  border-image: url(/assets/fancy-border.png) 10 10 stretch;
}
```

If the `border` shorthand worked as proposed in this issue:

My big warning buttons are now broken. I check dev tools. The border width and border color are still there.  So is the `border-image` property, but it's assigned with a simple tag selector. Why is it overriding the border I set with a _class_ selector? I thought I understood CSS! This isn't how it's supposed to work! Why must everything be so darn complicated!!!  Stupid `border-image` keeps breaking everything. No wonder we never use it.

-- 
GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2108#issuecomment-353209227 using your GitHub account

Received on Wednesday, 20 December 2017 23:07:44 UTC