Scribd
Upload
11 views

CSS Tips and Tricks

Uploaded by

Tuấn Khang
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

CSS Tips and Tricks

Uploaded by

Tuấn Khang
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

CSS Tips and Tricks

1. Use Flexbox for Layouts

Flexbox is perfect for creating flexible, responsive layouts. Use 'display: flex;' on a container and

'justify-content' or 'align-items' for alignment.

2. Use Variables for Consistency

CSS variables (e.g., '--main-color: #3498db;') help maintain a consistent design and simplify theme

changes. Use 'var(--main-color)' to apply variables.

3. Optimize Media Queries

Define breakpoints logically, such as '768px' for tablets. Use 'em' or 'rem' units for media queries to

adapt better to zoomed views.

4. Use CSS Grid for Complex Layouts

CSS Grid is ideal for 2D layouts. Define rows and columns with 'grid-template-rows' and

'grid-template-columns'.

5. Apply Transition Effects

Add smooth transitions using 'transition: all 0.3s ease;' for hover or focus effects.

6. Avoid Repetition with Shorthand Properties

Combine margin, padding, or border properties into shorthand to reduce code redundancy, e.g.,

'margin: 10px 5px;'.

7. Center Elements Easily

For centering elements, use 'display: flex;' combined with 'justify-content: center;' and 'align-items:

center;'.

8. Use Pseudo-Elements for Decorative Effects


'::before' and '::after' pseudo-elements can add visual flair without extra HTML elements.

9. Leverage Z-Index for Layering

Control stacking order using 'z-index'. Higher values appear on top.

10. Minimize Specificity Conflicts

Avoid inline styles and over-specific selectors. Use classes and reusable styles.

You might also like