CSS Fundamentals

CSS Fundamentals Skill

Master core CSS concepts: selectors, specificity, box model, positioning, and units.

Overview

This skill provides atomic, focused guidance on CSS fundamentals with type-safe parameters and comprehensive validation.

Skill Metadata

Usage

Skill("css-fundamentals")

Parameter Schema

parameters:
  topic:
    type: string
    required: true
    enum: [selectors, specificity, box-model, positioning, units, display]
    description: The CSS fundamental topic to explore

  level:
    type: string
    required: false
    default: beginner
    enum: [beginner, intermediate, advanced]
    description: Depth of explanation

  include_examples:
    type: boolean
    required: false
    default: true
    description: Include code examples

validation:
  - rule: topic_required
    message: "Topic parameter is required"
  - rule: valid_enum
    message: "Topic must be one of: selectors, specificity, box-model, positioning, units, display"

Topics Covered

Selectors

• Element, class, ID selectors
• Attribute selectors [attr], [attr=value]
• Pseudo-classes :hover, :focus, :nth-child()
• Pseudo-elements ::before, ::after
• Combinator selectors >, +, ~

Specificity

• Specificity calculation (0,0,0,0)
• Cascade order rules
• !important usage and pitfalls
• Inheritance patterns

Box Model

• Content, padding, border, margin
• box-sizing: border-box vs content-box
• Margin collapse behavior
• Inline vs block dimensions

Positioning

• static, relative, absolute, fixed, sticky
• Stacking context and z-index
• Containing block rules
• Offset properties (top, right, bottom, left)

Units

• Absolute: px, pt, cm
• Relative: em, rem, %, vh, vw
• Newer units: ch, lh, cqi, cqw
• When to use which unit

Retry Logic

retry_config:
  max_attempts: 3
  backoff_type: exponential
  initial_delay_ms: 1000
  max_delay_ms: 10000
  retryable_errors:
    - TIMEOUT
    - RATE_LIMIT
    - TEMPORARY_FAILURE

Logging & Observability

logging:
  entry_point: skill_invoked
  exit_point: skill_completed
  log_parameters: true
  log_response_size: true
  metrics:
    - invocation_count
    - success_rate
    - avg_response_time

Quick Reference

Specificity Calculator

Inline styles    → 1,0,0,0
ID selectors     → 0,1,0,0
Classes/attrs    → 0,0,1,0
Elements         → 0,0,0,1

Example: div#header .nav a:hover
         0,1,2,2 (ID=1, class+pseudo=2, elements=2)

Box Model Visual

┌─────────────────────────────────┐
│           MARGIN                │
│   ┌─────────────────────────┐   │
│   │        BORDER           │   │
│   │   ┌─────────────────┐   │   │
│   │   │    PADDING      │   │   │
│   │   │   ┌─────────┐   │   │   │
│   │   │   │ CONTENT │   │   │   │
│   │   │   └─────────┘   │   │   │
│   │   └─────────────────┘   │   │
│   └─────────────────────────┘   │
└─────────────────────────────────┘

Unit Recommendations

Code Examples

Selector Efficiency

/* Efficient: Single class */
.nav-link { }

/* Less efficient: Descendant chain */
nav ul li a { }

/* Prefer attribute selectors */
[data-state="active"] { }

Box Model Reset

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

Test Template

describe('CSS Fundamentals Skill', () => {
  test('validates topic parameter', () => {
    expect(() => skill({ topic: 'invalid' }))
      .toThrow('Topic must be one of: selectors, specificity...');
  });

  test('returns selector examples for selectors topic', () => {
    const result = skill({ topic: 'selectors', level: 'beginner' });
    expect(result).toContain('.class');
    expect(result).toContain('#id');
  });

  test('handles missing optional parameters', () => {
    const result = skill({ topic: 'box-model' });
    expect(result.level).toBe('beginner');
    expect(result.include_examples).toBe(true);
  });
});

Error Handling

Related Skills

• css-flexbox-grid (layout builds on fundamentals)
• css-architecture (naming builds on selectors)
• css-modern (extends selector knowledge)