Power Tools
Master advanced selector combinations for precise targeting.
/* Negation pseudo-class */
.card:not(:last-child) { margin-bottom: 20px; }
/* Has pseudo-class */
.card:has(.badge) { border-left: 4px solid blue; }
/* Is and Where */
:is(h1, h2, h3) { font-family: sans-serif; }
:where(.card, .box) p { line-height: 1.6; }
Smooth Motion
Create sophisticated animations with cubic-bezier and keyframes.
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.element {
animation: slideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
Scalable
Organize CSS with methodologies like BEM and utility patterns.
/* BEM Naming Convention */
.block { }
.block__element { }
.block--modifier { }
/* Utility Classes */
.mx-auto { margin-inline: auto; }
.p-4 { padding: 1rem; }
.flex { display: flex; }
Optimized
Optimize CSS for better rendering performance.
/* Use transform and opacity for animations */
.fast-animation {
transition: transform 200ms, opacity 200ms;
}
/* Avoid expensive properties */
/* ❌ */ .slow { box-shadow: 0 0 50px red; }
/* ✓ */ .fast { transform: translateZ(0); }
/* Use will-change sparingly */
.optimized {
will-change: transform;
}
Compatible
Handle browser compatibility with feature queries and fallbacks.
/* Feature queries */
@supports (display: grid) {
.grid { display: grid; }
}
@supports not (display: grid) {
.grid { display: flex; }
}
/* Vendor prefixes */
.element {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
Precision
Understanding CSS specificity and the cascade.
/* Specificity weights:
Inline styles: 1,0,0,0
IDs: 0,1,0,0
Classes/Attributes: 0,0,1,0
Elements: 0,0,0,1 */
#header .nav a { } /* 0,1,1,1 */
.nav a:hover { } /* 0,0,2,1 */
a { } /* 0,0,0,1 */