Responsive design and fluid layout
Media Queries
Use @media rules to apply different styles based on device viewport width, height, resolution, device orientation and other conditions to achieve responsive layout.
Flexbox and Grid layout
Use modern layout models to solve complex layout problems such as elastic scaling, alignment, adaptive column width, etc.
Subgrid (CSS Grid Level 2)
Allows child elements to inherit the row and column structure of the parent grid container, simplifying the complexity of nested grid layout.
Percentage, viewport units (vw/vh/vmin/vmax)
Realize relative unit layout based on viewport size to ensure that elements adapt to changes in screen size.
Animation and interaction
Keyframe animations
Use @keyframes to define the animation process, and combine animation properties to control the animation playback, duration, speed curve, number of iterations, etc.
CSS Transitions
Define the effect of smooth transition between different states of elements, such as color gradient, size change, etc.
Transforms (rotation, scaling, displacement, tilt) and Perspective
Realize three-dimensional transformation and stereoscopic visual effects of elements.
Perspective and Transform-style
Create 3D spatial perspective effects to make elements appear in three-dimensional space.
Hover, Focus, Active state and Pointer Events
Enhance interactive feedback, such as hover effects, focus indicators, click states, etc.
Performance optimization
Critical CSS
Extract the core styles required for the first screen load, and load them first through inline or preload to reduce blocking rendering.
CSS Sprites or Icon Fonts
Reduce HTTP requests and optimize image resource loading.
Prefers-reduced-motion
Respect the user’s preference to reduce animation and motion effects.
Contain and Content-visibility
Optimize rendering performance, limit the rendering range of elements or delay the rendering of non-viewport content.
CSS Minification, Tree Shaking and Code Splitting
Compress CSS code, remove unused styles, and load style sheets on demand.
will-change attribute
Prompt the browser for upcoming changes to help the browser prepare for optimization.
CSS Preprocessors and Postprocessors
Sass, Less, Stylus and other preprocessors
Introduce programming features such as variables, nesting, mixing, functions, etc. to improve the maintainability and reusability of CSS.
PostCSS and its plug-ins
Perform CSS conversion, automatic prefix completion, polyfill of future features, etc.
CSS-in-JS
Styled Components, Emotion, JSS and other libraries
Embed CSS as JavaScript objects or strings into components to achieve tight coupling of style and logic, which is conducive to modularization and theming.
CSS Advanced Techniques
CSS Houdini
Use CSS Houdini APIs (such as Paint API, Properties & Values API, etc.) to write low-level graphics rendering and custom CSS properties.
CSS Custom Properties (Variables)
Implement global or local style variables to facilitate unified style management and dynamic adjustment.
Advanced usage of CSS Selectors
Such as :nth-child, :not, :has() (experimental), etc., to accurately select and manipulate DOM elements.
Visual and filter effects
Filters
Such as blur, brightness, contrast, drop-shadow, hue-rotate, etc., for visual effects processing of images and non-image elements.
Backdrop Filters
Filter effects applied to the back of elements, such as blur, color adjustment, etc., do not affect the elements themselves.
Clipping & Masking
Use clip-path (including SVG path), mask-image, etc. to achieve complex clipping and masking effects.
Tools and workflows
CSS Linters (such as Stylelint)
Check CSS code quality and follow best practices and code specifications.
CSS Modules
Avoid class name conflicts in a modular environment and implement local scope CSS.
CSS-in-CSS methods (such as BEM, OOCSS, SMACSS)
Organize and name CSS classes to improve code structure and maintainability.
Accessibility (A11Y)
ARIA roles and attributes
Enhance the semantics of elements and support assistive technology recognition and interaction.
Inert (experimental)
Temporarily disable the interactivity of elements to prevent assistive technology from focusing on inactive areas.
Experimental
CSS Houdini
A series of low-level CSS APIs that allow developers to extend the CSS language, such as Paint Worklet (custom painting), Properties & Values API (custom properties and values), etc.
Container Queries (experimental)
Adjust styles based on the size of the element itself rather than the viewport, to achieve more fine-grained responsive design.
Scroll-linked Effects (such as scroll-snap-type, scroll-margin, scroll-padding, etc.)
Control scrolling behavior and scroll-related animation effects.
Aspect-ratio (experimental)
Set the intrinsic ratio of an element to avoid stretching or compressing the content.
Motion Path (experimental)
Move an element along an SVG path or CSS shape.
