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 6 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 end up with 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)
Would result in:
- 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)
formargin-left:auto; margin-right:auto;
-
Py(5px)
forpadding-top:5px; padding-bottom:5px;
Border helper classes
When it comes to border styling, initial values exist for width
and color
but many authors may still want to set all 3 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 simply 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.