CSS Notes 2
🧠 1. CSS Grid – Fully Missing
You covered Flexbox through display: flex, but there’s no dedicated section on CSS
Grid, which is crucial for 2D layouts.
Missing Topics:
grid-template-rows, grid-template-columns
grid-area, grid-gap, grid-auto-flow
Implicit vs Explicit grids
Named grid lines, grid shorthand
repeat(), minmax(), auto-fit, auto-fill
Grid alignment: justify-items, align-items, place-items
🧱 2. Flexbox – Only mentioned under display
No deep dive into Flexbox layout.
Should Include:
flex-direction, flex-wrap
justify-content, align-items, align-content
flex-grow, flex-shrink, flex-basis
gap in Flexbox
order, align-self
Practical flex layout examples
🧿 3. CSS Animations with @keyframes
You covered transition, but not the full @keyframes animation system.
Missing Concepts:
@keyframes syntax
animation-name, animation-duration, animation-delay, etc.
animation-fill-mode, animation-iteration-count
Differences: transition vs animation
Pause/resume animations
Chained and staggered animations
🌀 4. Scroll-Linked Animations (scroll-timeline)
Modern CSS supports scroll-based animation linking via @scroll-timeline
(Chrome/Edge supported).
Optional, experimental, but powerful.
🌗 5. prefers-reduced-motion, prefers-color-scheme (Media Query Level 5)
You used prefers-color-scheme, but didn’t cover:
prefers-reduced-motion
prefers-contrast
inverted-colors
forced-colors
👉 Important for accessibility & system-based styling.
6. Container Queries – Only briefly touched
You mentioned container queries under @container, but a full breakdown is missing.
Should Include:
@container rule
container-type, container-name
Difference from @media
Practical responsive components using container queries
🎯 7. View Transitions API (new, optional)
Optional but cutting-edge: allows seamless page transitions in SPAs using :view-
transition-*.
🎭 8. Layered Styles – @layer and @scope
Not found. Useful for:
CSS layering with @layer
Scoping styles to specific parts of DOM with @scope (new)
Great for large component-based systems.
🔒 9. Advanced :is(), :has() use in real-world
Although :is() and :has() are mentioned, you could benefit from:
Combining them with :not()
Using :has() for parent-state logic
Performance implications
📏 10. Advanced Responsive Units
While you covered vmin, vmax, lh, ch, you didn’t cover:
dvh, svh, lvh – Dynamic Viewport Height Units (critical for mobile browser
issues)
Especially 100vh bugs on iOS that dvh solves
🎨 11. Accent Color & Form Styling
Missing form-related styling enhancements:
accent-color (radio, checkbox theming)
appearance: none for custom inputs
::file-selector-button, ::range-thumb, etc.
🧮 12. Cascade Layers (@layer)
Very important for organizing stylesheets and improving style overrides.
🧪 13. Feature Queries (@supports)
Not covered. Helps with progressive enhancement.
@supports (display: grid) {
.layout {
display: grid;
}
}
🧬 14. Animation Utility Properties
Like:
animation-composition
animation-timeline (with ScrollTimeline)
(Advanced, optional)
🧠 15. Practical Design Systems
This is not CSS per se, but topics like:
Naming conventions (BEM, CUBE, SMACSS)
Theming structure
CSS-in-JS overview
🧱 1. Subgrid (in CSS Grid Level 2)
You're missing:
display: subgrid;
Allows nested grid items to inherit track definitions from their parent.
Supported in Firefox and Safari (Chrome soon).
Very useful for consistent vertical rhythm in components.
🧪 2. CSS Houdini (optional, cutting-edge)
Not in your notes, but Houdini lets you:
Create custom CSS properties with logic
Write custom paint, layout, animation logic
Used via @property, registerPaint(), etc.
This is advanced, but if you're aiming for mastery — it's worth knowing.
📥 3. Form Control Pseudo-elements & Styling
More advanced control for:
::file-selector-button
::placeholder, ::selection
input[type="range"]::thumb, ::track
appearance: none;
Helps when customizing form UIs without JS.
🧭 4. Logical Properties: Inline/Block axis names
You touched logical props like margin-inline, but may have missed these related
pieces:
Property Replaces
inset-inline-start left in LTR, right in RTL
inset-block-end bottom
border-start-start-radius top-left border radius depending on writing mode
These help when designing for right-to-left languages or vertical text.
🧯 5. Reduced Motion Strategies
Your notes include transitions/animations, but not how to respect user settings:
@media (prefers-reduced-motion: reduce) {
*{
animation: none !important;
transition: none !important;
}
}
Critical for accessibility best practices.
📜 6. Scroll Snap
Let users scroll section-by-section (like slides) with:
scroll-snap-type: y mandatory;
scroll-snap-align: start;
Used for carousels, one-pagers, onboarding flows.
🧼 7. Reset & Normalize CSS
Not seen in your notes:
* { box-sizing: border-box; }
Removing default margin/padding
Use of Normalize.css or modern resets (:where(*), etc.)
These improve cross-browser consistency.
8. Scoping (@scope)
Upcoming feature — lets you scope styles to part of the DOM, avoiding global
overrides.
@scope (.component) {
h2 {
color: blue;
}
}
Scoped styles only apply within .component.
🎨 9. Color Mixing & Manipulation Utilities
While you covered color functions like color-mix() and hsl(), you're missing:
relative-color-syntax (coming soon)
color-contrast() → for accessible foreground selection
light-dark() → choose color based on light/dark mode
📱 10. Viewport Units Bugs & Fixes on Mobile
You mention vh, but not how it behaves buggily on mobile (iOS/Android toolbars).
Fix: Use new units:
dvh (dynamic viewport height)
svh, lvh (smallest/largest)
🔩 11. calc() in complex layout systems
You're using calc() but didn’t explore:
Nested calc()
Combining clamp() and calc() for truly fluid spacing
Conditional calc() based on var()
12. Dev & Optimization Practices
You may benefit from a section on:
Tool/Practice Benefit
Autoprefixer Adds vendor prefixes automatically
Minifiers Reduces file size
CSS Modules Isolated CSS in component frameworks
Utility-first CSS (like Tailwind) Scalable design tokens
BEM Naming Clean, predictable class names
PostCSS Plugin system for CSS pre/post processing
📦 13. Component Composition with CSS
Not exactly a "feature", but missing:
How to build reusable, scalable components using only CSS
Design systems: spacing scale, color tokens, typography rules
