asm.css

What is asm.css?

asm.css is a css assembly, it is meant to be used in other projects.

Example

display: flex -> .di-fx
direction: rtl -> .di-rtl
border-style: none -> .bost-n
display: table -> .di-ta
height: auto -> .he-au

Naming

1. Property naming: First two letters of each word (e.g. box-sizing→ bosi)

2. Single word value naming: First two letters of each word.

3. Multi-word value naming: First letter of each word.

4. Single word conflicts: the next syllable is taken (e.g. style → sty-le → sl),

5. Multi-word conflicts: resolved by taking the next unique letter (e.g. max-content → mac, min-content → mic, wrap → wr, wrap-reverse → wre)

FAQ

• Why?

  • Because it makes read/writing css easier.

• Why are semi-useless properties included in asm.css?

  • Because asm.css is meant to be a base from which other projects can take from.

• How do I use asm.css from other projects

  • I recommend postcss-compose

• How is this different from Tachyons?

  • asm.css has file-per-property naming as in vertical-align classes are in the vertical-align folder

  • asm.css has a somewhat sane naming scheme that can be inferred without looking up classes.

  • asm.css doesn’t bundle normalize.css.

  • asm.css doesn’t enforce box-sizing: border-box.

Pull requests

• Explain the reasoning for the changes in the commit message, use prop: change description style.