CSS Formatter

After Minification

.container{max-width:1200px;margin:0 auto;padding:20px}

Size: 57 bytes (16% reduction)

Modern CSS Layout Systems

CSS has evolved from float-based layouts to powerful modern systems. Understanding these layout methods is essential for responsive web design.

CSS Grid - Two-Dimensional Layouts:

CSS Grid excels at creating complex two-dimensional layouts with rows and columns. Perfect for page layouts, image galleries, and dashboard designs.

• display: grid; - Activates grid layout on container
• grid-template-columns: Define column structure (e.g., repeat(3, 1fr))
• grid-template-rows: Define row structure
• gap: Spacing between grid items
• grid-area: Position items in specific grid cells

Flexbox - One-Dimensional Layouts:

Flexbox is ideal for one-dimensional layouts (rows or columns). Perfect for navigation bars, card layouts, and component alignment.

• display: flex; - Activates flexbox on container
• justify-content: Align items horizontally (center, space-between, space-around)
• align-items: Align items vertically (center, flex-start, flex-end)
• flex-direction: Set direction (row, column, row-reverse, column-reverse)
• flex-wrap: Allow items to wrap to new lines

CSS Specificity and Cascade

Understanding CSS specificity prevents styling conflicts and reduces the need for !important declarations. Specificity determines which styles apply when multiple rules target the same element.

Specificity Hierarchy (highest to lowest):

• Inline Styles: 1000 points - style="color: red;"
• IDs: 100 points - #header { }
• Classes, Attributes, Pseudo-classes: 10 points - .button, [type="text"], :hover
• Elements, Pseudo-elements: 1 point - div, p, ::before

Best Practices:

• Avoid !important - it breaks the cascade and makes debugging difficult
• Use classes over IDs for styling (IDs are too specific)
• Keep selectors shallow (max 3 levels deep)
• Use BEM naming convention for clear component structure

CSS Variables (Custom Properties)

CSS variables enable reusable values throughout your stylesheet, making theme changes and maintenance much easier. They're supported in all modern browsers.

Defining and Using Variables:

• Define: :root { --primary-color: #667eea; --spacing: 16px; }
• Use: color: var(--primary-color);
• Fallback: color: var(--primary-color, #000);
• Scope: Variables can be scoped to specific elements
• JavaScript: Access with element.style.getPropertyValue('--primary-color')

Common Use Cases:

• Theme colors and brand palette
• Spacing and sizing scales
• Typography settings (font families, sizes, weights)
• Dark mode implementation
• Responsive breakpoints

CSS Architecture and Methodologies

Organizing CSS for large projects requires methodology. These approaches help maintain scalable, maintainable stylesheets.

BEM (Block Element Modifier):

Naming convention that creates clear component structure: .block__element--modifier

• Block: .card (standalone component)
• Element: .card__title (part of block)
• Modifier: .card--featured (variation of block)

CSS Preprocessors:

Sass, Less, and Stylus extend CSS with variables, nesting, mixins, and functions. While our formatter works with plain CSS, preprocessor output should be formatted for debugging.

• Variables: $primary-color: #667eea;
• Nesting: .nav { .item { } }
• Mixins: Reusable style blocks
• Functions: Calculate values dynamically

CSS Performance Optimization

Optimized CSS improves page load speed and rendering performance. Follow these practices for faster websites.

Performance Tips:

• Minimize Selector Complexity: Avoid deeply nested selectors (max 3 levels)
• Avoid Universal Selector: * { } is slow, targets every element
• Use Shorthand Properties: margin: 10px 20px; instead of four separate properties
• Minify for Production: Remove whitespace and comments (reduces file size 30-40%)
• Critical CSS: Inline above-the-fold CSS for faster First Contentful Paint
• Remove Unused CSS: Use PurgeCSS or similar tools to eliminate dead code