2
\$\begingroup\$

I have created several mixins for a button to attempt to reduce duplication and contribute to the overall improvement of performance. I am looking for guidance on how to tighten this up so it is as DRY (Don't Repeat Yourself) as possible. Or is it already as DRY as possible?

Here is the code:

// mixin - button shape
@mixin buttonShape {
    vertical-align:middle;
    line-height:1.333rem;height:2.166rem;
    color:#282a2e;
    border-radius:0;
    margin-top:1.083rem;
    margin-bottom:.333rem;
    margin-right:1.073rem;
    border:none;
    transition: background-color .2s;
}

// mixin - button gradients
@mixin gradientNormal {
    background-color:#efefee;
    background:linear-gradient(to bottom,#efefee 0,#d0d0ce 100%);
    box-shadow:inset 0 0 0 .083rem #fff;outline:1px solid silver;
}

@mixin gradientHoverActive {
    background:linear-gradient(to bottom,#ffffff 0,#ffffff 100%);
    box-shadow:inset 0 0 0 .083rem #fff;outline:2px solid #e87722;
}


// normal state
.ui-button {
    font-size: 12px;
    @include buttonShape;
    @include gradientNormal;
}

// hover
.ui-button:enabled:hover,
.ui-button:focus {
    @include buttonShape;
    @include gradientHoverActive;
}

// active
.ui-button:enabled:active {
    @include buttonShape;
    @include gradientHoverActive;
}

\$\endgroup\$
  • \$\begingroup\$ Are these intended to be applied to <button> elements? \$\endgroup\$ – 200_success Aug 21 '17 at 5:16
  • \$\begingroup\$ Yes these are to be applied to <button>. @200_success \$\endgroup\$ – JayCray Aug 23 '17 at 13:52
1
\$\begingroup\$

Formatting

Format your code better. Put a space after the colon after properties. Don't put multiple properties in one line.

Use of SASS

Put your colors and lengths into variables so you can reuse them at other places, when they are supposed to be identical.

Why are the numbers not rounded? There is probably no visible difference between 1.073rem and 1.083rem and they probably could even be rounded to 1.1rem. If you are calcualting the values from something, then use SASS to do the calculations.

CSS itself

The buttons don't have a left margin.

The font-size either also belongs into the mixin, or removed entirely.

The mixin buttonShape shouldn't be repeated in the :hover/:active/ :focus rules.

If the rules .ui-button:enabled:hover, .ui-button:focus and .ui-button:enabled:active are supposed to be identical, then join them into one rule.

Unless you are explicitly declaring rules for disabled buttons the addition of the :enabled pseudo-class does not make sense.

Design

From a design and usability stand point it's not a great idea to have :hover, :focus and :active all look the same.

\$\endgroup\$
  • \$\begingroup\$ Thank you very much RoToRa. Good tips. I am not the designer so the visual/color choices are not mine. I am simply trying to make it as tight as possible. I appreciate your thoughts. \$\endgroup\$ – JayCray Aug 23 '17 at 13:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.