Modern CSS Techniques

# Modern CSS Techniques

CSS has evolved significantly in recent years, introducing powerful new features that make creating responsive, maintainable layouts easier than ever. Let's explore some modern CSS techniques that every developer should know.

## CSS Grid

CSS Grid is a two-dimensional layout system that's perfect for creating complex layouts.

### Basic Grid

```css
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}

.grid-item {
background: #f0f0f0;
padding: 20px;
}
```

### Named Grid Lines

```css
.layout {
display: grid;
grid-template-columns: [sidebar-start] 250px [sidebar-end main-start] 1fr [main-end];
grid-template-rows: [header-start] 60px [header-end content-start] 1fr [content-end];
}

.header {
grid-column: sidebar-start / main-end;
grid-row: header-start / header-end;
}

.sidebar {
grid-column: sidebar-start / sidebar-end;
grid-row: content-start / content-end;
}

.main {
grid-column: main-start / main-end;
grid-row: content-start / content-end;
}
```

## Flexbox

Flexbox is perfect for one-dimensional layouts and component-level design.

### Centering Content

```css
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
```

### Flexible Navigation

```css
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}

.nav-links {
display: flex;
gap: 1rem;
list-style: none;
}
```

## CSS Custom Properties (Variables)

Custom properties make CSS more maintainable and enable dynamic theming.

### Basic Usage

```css
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--font-size-base: 1rem;
--spacing-unit: 8px;
}

.button {
background-color: var(--primary-color);
font-size: var(--font-size-base);
padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
}
```

### Dynamic Theming

```css
[data-theme="dark"] {
--bg-color: #1a1a1a;
--text-color: #ffffff;
}

[data-theme="light"] {
--bg-color: #ffffff;
--text-color: #000000;
}

body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
```

## Container Queries

Container queries allow you to style elements based on their container's size, not the viewport.

```css
.card-container {
container-type: inline-size;
}

.card {
padding: 1rem;
}

@container (min-width: 300px) {
.card {
display: flex;
gap: 1rem;
}

.card-image {
flex: 0 0 100px;
}
}
```

## Modern Selectors

### :has() Selector

The :has() selector allows you to style elements based on their descendants.

```css
/* Style cards that contain images */
.card:has(img) {
border: 2px solid var(--primary-color);
}

/* Style form that has invalid inputs */
.form:has(input:invalid) {
border-color: red;
}
```

### :is() and :where() Selectors

These selectors help reduce repetition and manage specificity.

```css
/* Instead of writing multiple selectors */
h1, h2, h3, h4, h5, h6 {
font-family: var(--heading-font);
}

/* Use :is() */
:is(h1, h2, h3, h4, h5, h6) {
font-family: var(--heading-font);
}

/* :where() has zero specificity */
:where(h1, h2, h3) {
margin-top: 0;
}
```

## Logical Properties

Logical properties make your CSS more internationalization-friendly.

```css
.element {
/* Instead of margin-left and margin-right */
margin-inline: 1rem;

/* Instead of margin-top and margin-bottom */
margin-block: 2rem;

/* Instead of border-left */
border-inline-start: 2px solid var(--primary-color);
}
```

## Conclusion

Modern CSS provides powerful tools for creating responsive, maintainable layouts. By leveraging Grid, Flexbox, custom properties, container queries, and modern selectors, you can write more efficient and flexible CSS that adapts to different contexts and requirements.