Question

For a given class, I want to have the following styles:

stlye1 {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0px;
}

But that’s a lot of duplicates so I would like to just write:

stlye1 {
    padding: 0;
    padding-bottom: 10px;
}

Will this be something bad to do?

update:

when I see 3 values (the short hand), i’m not sure what is the last one going to apply to.
so i came up with the second method above to make it clear which one i want to override.

update 2:

for a short hand method, how do you specific the followings:

stlye1 {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0px;
}

style1 {
    padding: 0 0 10px; // now i know this one, thanks!
}



stlye2 {
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 0px;
}

style2 {
    padding: 0 10px 0; // is this correct?
}



stlye3 {
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0px;
}

style3 {
    padding: 10px 0 0; // is this correct?
}



stlye4 {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 10px;
}

style4 {
    padding: // i have no clue.
}

update 3:

in short, style2 and 4 cannot be done in shorthand format by suppling 3 values only.
as indicated by PassKit, left and right can’t be specified alone with 3 values only.

Answer 1

While your suggestion is perfectly valid, the most concise form would be:

stlye1 {
    padding: 0 0 10px;
}

This short hand format breaks down as padding: top(0) right(0) bottom(10px); and left defaults to the right value because a left value has not been specified.

For the 4 styles in your question, styles 1 and 3 are correct, but for styles 2 and 4, see style 5 below and the accompanying note.

For reference, the style shorthand breaks down as follows:

If there is one value, it applies to all 4 attributes, top, right, bottom and left.

stlye1value {
    padding: 10px;
}

/* equals */

stlye1value {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

---

If there are two values, the first value applies to top & bottom attributes and the second value to left & right

stlye2values {
    padding: 0 10px;
}

/* equals */

stlye2values {
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 10px;
}

---

If there are 3 valus, the first applies to top, the second applies to left & right and the third applies to bottom.

stlye3values {
    padding: 0 10px 20px;
}

/* equals */

stlye3values {
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
}

---

Specifying all 4 values sets padding in the order top, right, bottom, left (think of a clockwise circle starting at the top).

stlye4values {
    padding: 0 10px 20px 30px;
}

/* equals */

stlye4values {
    padding-top: 0;
    padding-right: 10px; 
    padding-bottom: 20px;
    padding-left: 30px;

}

---

Note: There is no way to independently specify a right or left value using shorthand without entering all 4 values or using the padding-left or padding-right.

style5 {
    padding-left: 10px; 
}

/* providing there are no previous padding rule for style5 equals */

style5 {
    padding: 0 0 0 10px; 
}

/* equals */

stlye5 {
    padding:0;
    padding-left:10px;
}

/* equals */

stlye5 {
    padding-top: 0;
    padding-right: 0; 
    padding-bottom: 0;
    padding-left: 10px;

}