CSS Code Example
/* Typography Variables */
:root {
--font-primary: 'Helvetica Neue', sans-serif;
--font-secondary: Georgia, serif;
--font-size-base: 16px;
--line-height: 1.5;
/* Color Scheme */
--color-primary: #007bff;
--color-secondary: #6c757d;
--color-success: #28a745;
--color-error: rgb(220, 53, 69);
--color-warning: hsl(45, 100%, 51%);
/* Spacing */
--spacing-unit: 8px;
--spacing-large: calc(var(--spacing-unit) * 2);
--spacing-small: calc(var(--spacing-unit) * 0.5);
/* Borders */
--border-radius: 4px;
--border-width: 1px;
}
/* Media Queries and Feature Queries */
@media screen and (min-width: 768px) {
:root {
--font-size-base: 18px;
}
}
@supports (display: grid) {
.grid-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-large);
}
}
/* Animations and Keyframes */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Complex Selectors */
.container > .header {
font-family: var(--font-primary);
font-size: calc(var(--font-size-base) * 1.5);
color: var(--color-primary);
background-image: url(https://example.com/image.jpg);
}
#main-content {
padding: var(--spacing-large);
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Pseudo-classes and Pseudo-elements */
.button:hover,
.button:focus {
background-color: var(--color-secondary);
transform: translateY(-1px);
transition: all 0.3s ease;
}
.card::before {
content: '';
display: block;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
/* Attribute Selectors */
input[type="text"],
input[type="email"] {
border: var(--border-width) solid var(--color-secondary);
border-radius: var(--border-radius);
padding: var(--spacing-unit);
}
button[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
/* Complex Properties */
.gradient-background {
background-image: linear-gradient(
45deg,
var(--color-primary) 0%,
var(--color-secondary) 100%
);
}
.flex-container {
display: flex;
flex-direction: column;
gap: clamp(1rem, 2vw, 2rem);
}
/* Named Colors and Units */
.color-examples {
color: darkslateblue;
background-color: aliceblue;
border: 2px solid cornflowerblue;
}
.unit-examples {
/* Absolute Units */
width: 100px;
margin: 1in;
border: 0.5mm solid black;
/* Relative Units */
padding: 1.5rem;
font-size: 1.2em;
line-height: 1.6;
/* Viewport Units */
height: 50vh;
max-width: 90vw;
/* Calculation */
margin-top: calc(2rem + 20px);
}
/* Function Usage */
.advanced-properties {
/* Color Functions */
color: rgb(33, 37, 41);
background-color: rgba(255, 255, 255, 0.9);
border-color: hsl(210, 50%, 50%);
outline-color: hsla(210, 50%, 50%, 0.5);
/* Transform Functions */
transform: translate3d(0, 10px, 0) rotate(45deg) scale(1.1);
/* Filter Functions */
filter: brightness(1.2) contrast(1.1) blur(2px);
/* Modern Color Functions */
color: color-mix(in srgb, var(--color-primary) 50%, var(--color-secondary));
}
/* Custom Media Queries */
@custom-media --mobile (max-width: 768px);
@custom-media --tablet (min-width: 769px) and (max-width: 1024px);
@custom-media --desktop (min-width: 1025px);
@media (--mobile) {
.responsive-element {
font-size: 14px;
padding: 0.5rem;
}
}
/* Layer Declarations */
@layer base, components, utilities;
@layer base {
/* Base styles */
body {
margin: 0;
font-family: var(--font-primary);
line-height: var(--line-height);
}
}
@layer components {
/* Component styles */
.card {
border-radius: var(--border-radius);
padding: var(--spacing-unit);
}
}
/* Container Queries */
@container (min-width: 400px) {
.container-query-card {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
/* Support Queries */
@supports (aspect-ratio: 16/9) {
.video-container {
aspect-ratio: 16/9;
}
}
/* Nest Rules (using PostCSS or other preprocessors) */
.article {
& h1 {
font-size: 2rem;
&:first-child {
margin-top: 0;
}
}
& p {
margin-bottom: var(--spacing-unit);
}
}