Shorthand notation

How Atomizer handles CSS shorthand notation.

Atomizer generally does not offer shorthand notation (e.g., M(5px,0,0,0)) because this would increase the number of selectors or declarations in the style sheet (i.e., create bloat.)

For example, border-width/style/color can be specified in any order:

• Bd(1px,solid,#000)
• Bd(1px,#000,solid)
• Bd(solid,#000,1px)
• Bd(solid,1px,#000)
• Bd(#000,1px,solid)
• Bd(#000,solid,1px)

The above creates six different rules for the exact same styling (a solid 1px black border). While the tool could be smart and assign all those classes to the same declaration, you'd still end up with more bytes than is necessary:

.Bd(1px,solid,#000),
.Bd(1px,#000,solid),
.Bd(solid,#000,1px),
.Bd(solid,1px,#000),
.Bd(#000,1px,solid),
.Bd(#000,solid,1px) {
    border: 1px solid #000;
}

It would also be possible to enforce order (i.e., width, style, color) to prevent such duplication, but you'd still have a lot of redundancy. For example:

• Bd(1px,solid,#000)
• Bd(1px,solid,#ccc)
• Bd(1px,solid,#555)
• Bd(2px,solid,#000)
• Bd(3px,solid,#000)
• Bd(1px,dotted,#000)

This would result in the following:

• 4 duplicate declarations for border-width
• 5 duplicate declarations for border-style
• 4 duplicate declarations for border-color

…either through duplicate declarations or selector grouping:

.Bd(1px,solid,#000),
.Bd(1px,solid,#ccc),
.Bd(1px,solid,#555),
.Bd(1px,dotted,#000) {
    border-width: 1px;
}

.Bd(1px,solid,#000),
.Bd(1px,solid,#ccc),
.Bd(1px,solid,#555),
.Bd(2px,solid,#000),
.Bd(3px,solid,#000) {
    border-style: solid;
}

.Bd(1px,solid,#000),
.Bd(2px,solid,#000),
.Bd(3px,solid,#000),
.Bd(1px,dotted,#000) {
    border-color: #000;
}

Convenience and helper classes

X/Y notation

Even though Atomizer does not allow shorthand notation, many classes support "x/y notation" which applies the same styling on opposite edges. For example:

• Mx(a) for margin-left:auto; margin-right:auto;
• Py(5px) for padding-top:5px; padding-bottom:5px;

Border helper classes

Regarding border styling, initial values exist for width and color, but many authors may still want to set all three values: width, color, and style. To make things a bit less verbose, Atomizer offers a set of helper classes for borders which set style to solid and width to 1px (as a default).

This allows you to use a single class to create a single pixel border that either "inherits" text color or can be combined with an Atomic class for border-color (e.g., Bd Bdc(#fff)).

In case solid and 1px are not the default style you'd prefer, but you still want to use the border helper classes, you can redefine those classes in your own style sheet using the rules below:

.Bd,
.BdX,
.BdY,
.BdT,
.BdEnd,
.BdB,
.BdStart {
    border-style: <style>;
}
.Bd {
    border-width: <width>;
}
.BdX {
    border-right-width: <width>;
    border-left-width: <width>;
}
.BdY {
    border-top-width: <width>;
    border-bottom-width: <width>;
}
.BdT {
    border-top-width: <width>;
}
.BdEnd {
    border-right-width: <width>;
}
.BdB {
    border-bottom-width: <width>;
}
.BdStart {
    border-left-width: <width>;
}

If you've chosen to namespace your Atomizer classes, be sure to add the namespace to the above rules.