Emmet: CSS Shorthand Basics

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

1. What You Will Learn

• The key differences between CSS context and HTML context: the same abbreviation expands completely differently
• Numeric properties auto-add px: m10 → margin: 10px;, p10 → padding: 10px;
• Explicit unit syntax: m10% → margin: 10%;, m10em → margin: 10em;
• Multi-value hyphen shorthand: m10-20 → margin: 10px 20px;, p10-20-30 → 3-value shorthand
• Color shorthand: c#fc0 → color: #ffcc00;, bd1-s#ccc → border: 1px solid #ccc;
• ! suffix forces !important: m10! → margin: 10px !important;

2. A Frontend Developer's Real Story

(1) The Pain: CSS Is Too Slow to Write; Repeated Properties Make Your Hands Ache

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

(2) How Emmet CSS Shorthand Solves It

Emmet's CSS shorthand borrows the first letters of CSS property names as abbreviations, letting Alice write one shorthand line that equals a full property. There are 4 key mechanisms:

1. Unit inference: Integers auto-add px (m10 → margin: 10px;), floats auto-add em (m1.5 → margin: 1.5em;).
2. Explicit units: Append a unit character directly after a number: m10% → margin: 10%;, m10em → margin: 10em;.
3. Multi-value hyphens: Use - to separate multiple values: m10-20 → margin: 10px 20px;, p10-20-30 → padding: 10px 20px 30px;.
4. Color # separator: c#fc0 → color: #ffcc00;, bd1-s#ccc → border: 1px solid #ccc;.

Alice rewrote those 8 minutes of CSS work as Emmet shorthand:

.m10-20+p16+fz14+c#333+bgc#f5f5f5

One line, 32 characters, 6 Tab presses (each shorthand expands independently), and 6 cards' styles were done in 12 seconds. 8 minutes of work reduced to 12 seconds—a 40x speed increase.

(3) Benefits

CSS shorthand is Emmet's second rung of the ladder for style authoring. Once mastered, Alice's style-writing speed increases 30–50x, and error rates (misspellings, missing semicolons) drop to nearly zero. The 6 core mechanisms in this lesson cover 90% of daily CSS authoring. After this lesson, Alice can write a landing page's CSS in under 15 seconds—down from 8 minutes.

3. Core Definition of CSS Shorthand

CSS shorthand is the property name + value + unit three-in-one compression mechanism that Emmet provides in CSS file contexts (.css, .scss, .less). Its design philosophy: borrow the first letters of CSS property names as abbreviations, so that "a few letters + value + Tab" auto-expands into a complete property.

graph LR
    A[Emmet CSS Shorthand] --> B[Property Name Inference]
    A --> C[Unit Inference]
    A --> D[Value Separators]
    A --> E[! Suffix]

    B --> B1[m → margin]
    B --> B2[p → padding]
    B --> B3[fz → font-size]
    B --> B4[lh → line-height]

    C --> C1[Integer → px]
    C --> C2[Float → em]
    C --> C3[Explicit unit → % / em / ex]
    C --> C4[Unit aliases p/e/x]

    D --> D1[Hyphen - multi-value]
    D --> D2[# color separator]
    D --> D3[Character alias s=solid]

    E --> E1[! → !important]

    style A fill:#3b82f6,color:#fff
    style B fill:#10b981,color:#fff
    style C fill:#f59e0b,color:#fff
    style D fill:#8b5cf6,color:#fff
    style E fill:#ef4444,color:#fff

graph LR
    A[Emmet CSS Shorthand] --> B[Property Name Inference]
    A --> C[Unit Inference]
    A --> D[Value Separators]
    A --> E[! Suffix]

    B --> B1[m → margin]
    B --> B2[p → padding]
    B --> B3[fz → font-size]
    B --> B4[lh → line-height]

    C --> C1[Integer → px]
    C --> C2[Float → em]
    C --> C3[Explicit unit → % / em / ex]
    C --> C4[Unit aliases p/e/x]

    D --> D1[Hyphen - multi-value]
    D --> D2[# color separator]
    D --> D3[Character alias s=solid]

    E --> E1[! → !important]

    style A fill:#3b82f6,color:#fff
    style B fill:#10b981,color:#fff
    style C fill:#f59e0b,color:#fff
    style D fill:#8b5cf6,color:#fff
    style E fill:#ef4444,color:#fff

Tip: Emmet's CSS shorthand only takes effect in CSS contexts (.css, .scss, .less files). In an HTML file, writing m10 expands to <div class="m10"></div> (a div tag with class m10)—completely different from CSS context. The difference between the two contexts is the most common pitfall for beginners.

(1) Key Differences Between CSS Context and HTML Context

4. Unit Inference: Auto + Explicit + Aliases

Unit inference is the first core mechanism of CSS shorthand. When Emmet sees a number, it auto-adds a unit according to the rule "integer → px, float → em," or you can write the unit character explicitly.

(1) Numeric Properties Auto-Add px

Integer-valued CSS abbreviations auto-add the px unit. This is the highest-frequency expansion form of Emmet CSS shorthand.

Key Point: Integers auto-adding px is Emmet's default behavior. Most CSS dimension scenarios (margin, padding, width, height, font-size) use px, so defaulting to px eliminates 70% of unit typing.

(2) Explicit Units: m10% m10em m10ex

If you need a unit other than px, simply append the unit character after the number. Emmet outputs the unit name verbatim.

(3) Unit Aliases: p e x

Emmet provides 3 unit aliases to shorten long unit names:

Aliases can be stacked: m10p30e5x → margin: 10% 30em 5ex.

Note: Aliases only take effect when directly adjacent to numbers. In m10px, the p is the middle character of px (not an alias), because p is not the starting character of a unit. Emmet parses m10px as margin: 10px; (px is an explicit unit). The alias p only applies when the number is immediately followed by p as a standalone token (e.g., w100p).

5. Multi-Value Shorthand: Hyphen - Separator + Color # Separator

CSS shorthand supports multiple values, separated by hyphens -. Emmet also provides the # separator for color values (since # is the starting character for color values).

(1) Multi-Value Shorthand Rules Table

Key Point: Multi-value expansion follows the CSS standard—1 value = all sides, 2 values = top-bottom + left-right, 3 values = top + left-right + bottom, 4 values = top + right + bottom + left. This is fully consistent with CSS multi-value properties like margin, padding, border-radius, and border-width.

(2) Explicit Unit Multi-Values Can Omit Hyphens

If each value has an explicit unit (non-default px/em), Emmet allows omitting the hyphens and concatenating directly:

Tip: When an abbreviation contains # (color) or explicit units, Emmet intelligently recognizes value boundaries without needing hyphens. This allows mixed-value abbreviations like bd5#0s (→ border: 5px #000 solid) to work seamlessly.

(3) Color Shorthand: # Separator

Color is one of the highest-frequency values in CSS. Emmet uses # as the color start character; # itself acts as a value separator, so no hyphen is needed.

Key Point: Emmet auto-simplifies colors—#1 auto-expands to #111111, #e0 auto-expands to #e0e0e0, #fc0 auto-expands to #ffcc00. If you write a full 6-character color (e.g., #e0e0e0), Emmet leaves it unchanged. This behavior is controlled by the css.color.short configuration setting (enabled by default).

(4) ! Forces !important

Add ! at the end of a CSS abbreviation, and Emmet auto-appends the !important suffix. This is an essential tool for overriding third-party styles and debugging hacks.

Note: ! must be placed immediately at the end of the abbreviation with no preceding space or separator. m10 ! is invalid (Emmet treats m10 as a complete abbreviation and ! as content on the next line). To add !important to a multi-value abbreviation, still place ! at the end: m10-20! → margin: 10px 20px !important;.

6. Comprehensive Example: Card Styling — 7 Properties in One Line

Combine unit inference, multi-value shorthand, colors, and the ! override to write a complete e-commerce card style.

▶ Example: Basic Numeric Shorthand m10 p10 fz16 (Difficulty ⭐)

Three of the most commonly used numeric properties—proving that Emmet CSS shorthand really does save half your keystrokes.

Abbreviation:

m10 p10 fz16

Expansion:

margin: 10px;
padding: 10px;
font-size: 16px;

Output:

TEXT 📖 参照専用

📋 Copy

Breakdown: Three independent abbreviations, each expanding separately. In `m10`, `m` is the first letter of margin, 10 is the value, and Emmet auto-adds px → `margin: 10px;`. `p10` works the same way → `padding: 10px;`. In `fz16`, `fz` is the alias for font-size (f + z taken from the first letters of "font" and "size"), and 16 auto-adds px → `font-size: 16px;`. Emmet's CSS shorthand is essentially a compressed "property first letters + value" notation.

▶ Example: Explicit Units m10% c#f (Difficulty ⭐)

Explicit % unit and 1-character color auto-expansion—demonstrating the flexibility of unit inference.

Abbreviation:

m10% c#f

Expansion:

margin: 10%;
color: #ffffff;

Output:

TEXT 📖 参照専用

📋 Copy

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

📋 Copy

▶ Example: Multi-Value Shorthand m10-20 p10-20-30 bdrs5 (Difficulty ⭐⭐)

Multi-value hyphen shorthand—demonstrating that 2-value, 3-value, and single-value forms can all be written in one line.

Abbreviation:

m10-20 p10-20-30 bdrs5

Expansion:

margin: 10px 20px;
padding: 10px 20px 30px;
border-radius: 5px;

Output:

TEXT 📖 参照専用

📋 Copy

Breakdown: `m10-20` uses a hyphen to separate 2 values (10 and 20), both auto-adding px → `margin: 10px 20px;` (CSS standard semantics: top-bottom 10px, left-right 20px). `p10-20-30` uses hyphens to separate 3 values → `padding: 10px 20px 30px;` (top, left-right, bottom). In `bdrs5`, `bdrs` is the alias for border-radius (taken from the first few letters of border + radius), and 5 auto-adds px → `border-radius: 5px;`. The three abbreviations showcase the complete rule set for CSS multi-value shorthand.

▶ Example: Color Shorthand c#fc0 bgc#f5f5f5 bd1-s#ccc (Difficulty ⭐⭐)

Color + border shorthand—demonstrating that # as a value separator makes mixed-value abbreviations work seamlessly.

Abbreviation:

c#fc0 bgc#f5f5f5 bd1-s#ccc

Expansion:

color: #ffcc00;
background-color: #f5f5f5;
border: 1px solid #ccc;

Output:

TEXT 📖 参照専用

📋 Copy

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

📋 Copy

▶ Example: ! Important Flag m10! fz16! (Difficulty ⭐)

! forces !important—demonstrating that appending ! to the end of an Emmet abbreviation is the standard way to override styles.

Abbreviation:

m10! fz16!

Expansion:

margin: 10px !important;
font-size: 16px !important;

Output:

TEXT 📖 参照専用

📋 Copy

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

📋 Copy

7. Complete Example: E-Commerce Card — 7 Properties in One Line

Combine unit inference, multi-values, colors, and ! to write a complete e-commerce card style.

▶ Example: Complete E-Commerce Card Style (Difficulty ⭐⭐)

Abbreviation:

m10-20 p16 bdrs8 bgc#f5f5f5 c#333 fz14 bd1-s#e0e0e0

Expansion:

margin: 10px 20px;
padding: 16px;
border-radius: 8px;
background-color: #f5f5f5;
color: #333333;
font-size: 14px;
border: 1px solid #e0e0e0;

Output:

TEXT 📖 参照専用

📋 Copy

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

📋 Copy

❓ よくある質問

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

📖 まとめ

• CSS context and HTML context are dramatically different: the same m10 is <div class="m10"> in HTML but margin: 10px; in CSS
• Unit inference rules: integers auto-add px (m10 → margin: 10px;), floats auto-add em (m1.5 → margin: 1.5em;)
• Explicit units: m10% → margin: 10%;, m10em → margin: 10em;, m10ex → margin: 10ex;
• Unit aliases: p → %, e → em, x → ex (e.g., w100p → width: 100%)
• Multi-value hyphens: m10-20 → margin: 10px 20px;, m10-20-30 → 3 values
• Color # separator: c#fc0 → color: #ffcc00;, bd1-s#ccc → border: 1px solid #ccc;
• ! forces !important: m10! → margin: 10px !important;

📝 練習問題

1. Basic (Difficulty ⭐): In a .css file, enter the 6 abbreviations m10, p10, w100, h200, fz16, bd1 one by one, press Tab, and record the expansion results. Then rewrite them with explicit units (e.g., m10em, p10%) and compare the differences across the 12 expansions.
2. Intermediate (Difficulty ⭐⭐): Write one Emmet line for a button's 6 common properties (margin 2 values + padding single value + border-radius + background-color + color + font-size). Requirements: (a) use 3-character hex colors; (b) border-radius with explicit 5px; (c) font-size with a trailing ! to force priority. Record the expansion and explain why the 6 abbreviations must be separated by spaces (not hyphens). QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて