`max-width` and `min-width` shorthands

Question

Is there a shorthand for this properites?

For example, right now I do:

.main-exchange-container--title {
  min-width: 288px;
  max-width: 900px;;
}

Is there a way to do something like:

.main-exchange-container--title {
  widths: 288px  900px;
}

Answer 1

No but it can be done like below:

 .main-exchange-container--title { /* min-width: 288px; max-width: 900px; */ width:clamp(288px,100%,900px); height:50px; background:red; margin:auto; }

 <div class="main-exchange-container--title"></div>

Answer 2

There isn't a specific shorthand, but in vanilla CSS you could move it to its own class if reused a lot, eg.

._width-primary {
  min-width: 288px;
  max-width:900px;
}

<div class="main-exchange-container--title _width-primary">
</div>

---

Or, If you have 'framework' libraries, they may have classes to help simplify this (eg. bootstrap's grids/columns )

<div class="main-exchange-container--title col-12">
</div>

(it'll behave a little different to your rules though, so youd need to find the closest equivalent)

---

Or, If you have a pre-processor like LESS or Sass , it probably has a feature like mixins/includes to reuse certain rules without needing to export extra classes and add it to your HTML.

Example in LESS:

._width-primary() {
  min-width: 288px;
  max-width: 900px;
}
.main-exchange-container--title {
  ._width-primary()
}

in Sass (SCSS):

@mixin _width-primary {
  min-width: 288px;
  max-width: 900px;
}
.main-exchange-container--title {
  @include _width-primary;
}

both of the above will output this CSS:

.main-exchange-container--title {
     min-width: 288px;
     max-width: 900px;
}