I don't seem to understand when to use which. For example, I have seen:
border: 2px solid red;
instead of:
border-width: 2px;
border-style: solid;
border-color: red;
But I have also seen:
font: 12px/18px;
instead of:
font-size: 12px;
line-height: 18px;
My guess is that forward slash is used when defining different attributes whereas space is used for the same attribute.
Those are short-hand properties. There is no hard and fast rule to use them. you can choose based on your preference. But it is good to apply them when there is a possibility. code line count will be reduced and it looks more cleaner to me. you can find more here.
Exactly Right, as a general consensus, we only use spaces and forward slashed to simplify and make code hold a smaller footprint (minification). If doing a specific action however we would most likely use the expanded form.
Sometimes the expanded form is used for clarity sometimes the opposite, mostly its personal preference.
Sometimes or for some people it is force of habit to use the smaller or short-hand notations. Its really upto your style of coding and preferences.
Slashes generally denote for different functions but you might not often see such css. Spaces are for seperating arguments for example take the transition property:
transition: duration (e.g. .55s) || transition_type (e.g. ease) || action_type (e.g. all);
Spaces are used here (displayed as ||) to denote the differences in functionality such as the duration or time, transition type and action type etc.. These are used in the same line as they are for the same CSS element.
This can also reduce file sizes but nothing significant, just an added bonus :)
Those are short hand. your example for the border attribute is common, but as a general rule i would not use font: 12px/18px; as it takes some syntax out of your code, and if you work with anyone else its almost guaranteed to cause confusion.
