DEV Community

Cover image for Mastering CSS in 2025: The Definitive CSS Guide for Everyone | Part-2
Govind Vyas
Govind Vyas

Posted on

1 1

Mastering CSS in 2025: The Definitive CSS Guide for Everyone | Part-2

Table of Contents

No. Section Link
1 Responsive Design Principles Link
2 CSS Variables and Custom Properties Link
3 Animations and Transitions Link
4 Best Practices and Organization Link

Responsive Design Principles

In today's multi-device world, responsive design isn't optional โ€“ it's essential. Your website should look great whether it's viewed on a smartphone or a large desktop monitor.

Media Queries

Media queries are your responsive design superpower:

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}
Enter fullscreen mode Exit fullscreen mode

Responsive Units

Using relative units makes your design naturally responsive:

  • rem: Relative to root element's font size
  • em: Relative to parent element's font size
  • vw/vh: Relative to viewport dimensions
  • %: Relative to parent element's size

Practical Exercise: Responsive Service Section

Create a responsive service section that adapts seamlessly to different screen sizes using media queries and flexible units.

HTML:

<section class="services">
    <h2>Our Services</h2>
    <div class="services-container">
        <div class="service-card">
            <h3>Web Design</h3>
            <p>Create beautiful and functional websites.</p>
            <button>Learn More</button>
        </div>
        <div class="service-card">
            <h3>Development</h3>
            <p>Build robust web applications.</p>
            <button>Learn More</button>
        </div>
        <div class="service-card">
            <h3>SEO</h3>
            <p>Optimize for search engines.</p>
            <button>Learn More</button>
        </div>
    </div>
</section>
Enter fullscreen mode Exit fullscreen mode

CSS:

/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}
Enter fullscreen mode Exit fullscreen mode

CSS: Let's explore more specific breakpoints for our Service Section.

/* Base styles - Mobile First (320px and up) */
.services {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.service-card {
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}

button {
    width: 100%;
    padding: 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Small phones (375px and up) */
@media (min-width: 375px) {
    .services {
        padding: 20px;
    }

    .service-card {
        padding: 20px;
    }
}

/* Large phones (480px and up) */
@media (min-width: 480px) {
    .services-container {
        gap: 20px;
    }

    button {
        padding: 10px;
        font-size: 16px;
    }
}

/* Small tablets (600px and up) */
@media (min-width: 600px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .services {
        padding: 30px;
    }

    .service-card {
        padding: 25px; /* Improved spacing for larger screens */
    }

    button: hover {
        /* Add hover effect for non-touch devices */
        background: #0056b3;
        transform: translateY(-2px);
    }
}

/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
    .service-card {
        flex: 1; /* Three cards per row */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    button {
        /* Change to inline button */
        width: auto;
        padding: 10px 20px;
    }
}

/* Desktops (1200px and up) */
@media (min-width: 1200px) {
    .services {
        padding: 40px;
    }

    .services-container {
        gap: 30px;
    }

    .service-card {
        padding: 30px;
    }
}

/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
    .services {
        max-width: 1400px; /* Max width to maintain readability */
    }

    .service-card {
        padding: 35px; /* Larger padding for extra large screens */
    }
}

/* Print styles */
@media print {
    .services {
        padding: 0;
    }

    .service-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    button {
        display: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    button {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .service-card {
        background: #2a2a2a;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    h2 {
        color: #fff;
    }
}
Enter fullscreen mode Exit fullscreen mode

References:


CSS Variables and Custom Properties

CSS Variables (Custom Properties) bring programming-like flexibility to your stylesheets. They make maintenance easier and enable dynamic styling.

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --spacing-unit: 1rem;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-unit);
}
Enter fullscreen mode Exit fullscreen mode

Practical Exercise: CSS Variables for Theming and Reusability

<body>
    <header>
        <h1>CSS Variables & Custom Properties</h1>
    </header>

    <main>
        <section class="card">
            <h2>Introduction</h2>
            <p>This is a simple example to demonstrate how CSS variables work. Try toggling dark mode below!</p>
            <button onclick="toggleDarkMode()">Toggle Dark Mode</button>
        </section>

        <section class="card">
            <h2>Advantages of CSS Variables</h2>
            <ul>
                <li>Reusable throughout the CSS file</li>
                <li>Easy to update theme colors and styles</li>
                <li>Supports cascading and inheritance</li>
            </ul>
        </section>
    </main>

    <script>
        // Function to toggle dark mode by adding/removing the "dark-mode" class on the body element
        function toggleDarkMode() {
            document.body.classList.toggle('dark-mode');
        }
    </script>
</body>
Enter fullscreen mode Exit fullscreen mode
/* Define CSS variables (custom properties) in the :root selector */
        :root {
            --primary-color: #3498db; /* Main theme color */
            --secondary-color: #2ecc71; /* Accent color */
            --text-color: #333; /* Default text color */
            --font-size: 16px; /* Base font size */
            --padding: 10px; /* Base padding */
        }

        /* General styles using variables */
        body {
            font-family: Arial, sans-serif;
            font-size: var(--font-size);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }

        header {
            background-color: var(--primary-color);
            color: white;
            text-align: center;
            padding: var(--padding);
        }

        .card {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 20px;
            padding: var(--padding);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .card h2 {
            color: var(--primary-color);
        }

        .card p {
            color: var(--text-color);
        }

        button {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            border-radius: 5px;
            padding: calc(var(--padding) / 2) calc(var(--padding) * 2);
            cursor: pointer;
            font-size: var(--font-size);
        }

        button:hover {
            background-color: var(--primary-color);
        }

        /* Dark mode example by overriding variables */
        body.dark-mode {
            --primary-color: #1abc9c;
            --secondary-color: #e74c3c;
            --text-color: #f9f9f9;
            background-color: #333;
        }
Enter fullscreen mode Exit fullscreen mode

References:


Animations and Transitions

Adding movement to your website creates engaging user experiences. CSS provides two main ways to create animation:

Transitions

Perfect for simple state changes:

.button {
    background-color: blue;
    transition: all 0.3s ease;
}

.button:hover {
    background-color: darkblue;
    transform: scale(1.1);
}
Enter fullscreen mode Exit fullscreen mode

Keyframe Animations

For more complex, multi-step animations:

@keyframes bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

.bouncing-element {
    animation: bounce 1s infinite;
}
Enter fullscreen mode Exit fullscreen mode

Advanced Animation Techniques

CSS Custom Properties in Animations:

.animated-element {
    --animation-duration: 0.3s;
    --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);

    transition: transform var(--animation-duration) var(--animation-easing);
}

.animated-element:hover {
    --scale-factor: 1.1;
    transform: scale(var(--scale-factor));
}
Enter fullscreen mode Exit fullscreen mode

Advanced Keyframe Animation:

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

.typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid;
    width: 0;
    animation: typing 2s steps(20, end) forwards,
               blink .75s step-end infinite;
}
Enter fullscreen mode Exit fullscreen mode

Practical Exercise: Interactive Card

Create an interactive card with hover effects:

HTML:

<div class="card">
    <div class="card-content">
        <h3>Hover Me</h3>
        <p>Watch the magic happen!</p>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS:

.card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.card::before {
    content: '';
    position: absolute;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    width: 150%;
    height: 150%;
    transform: rotate(45deg) translate(-100%, -100%);
    transition: transform 0.6s ease;
}

.card:hover::before {
    transform: rotate(45deg) translate(-20%, -20%);
}
Enter fullscreen mode Exit fullscreen mode

References:


Best Practices and Organization

CSS Architecture

  • Use a consistent naming convention
  • Organize CSS files by component/feature
  • Keep specificity low where possible
  • Comment your code effectively
/* Component: Button */
.button {
    /* Base styles */
}

.button--primary {
    /* Primary variant */
}

.button--large {
    /* Size variant */
}
Enter fullscreen mode Exit fullscreen mode

Practical Exercise: Best Practices for CSS Architecture

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Architecture Exercise</title>
    <link rel="stylesheet" href="styles/reset.css"> <!-- Resets default browser styles -->
    <link rel="stylesheet" href="styles/layout.css"> <!-- Layout-related styles -->
    <link rel="stylesheet" href="styles/components/header.css"> <!-- Header component styles -->
    <link rel="stylesheet" href="styles/components/card.css"> <!-- Card component styles -->
    <link rel="stylesheet" href="styles/utilities.css"> <!-- Utility classes for quick fixes -->
</head>
<body>
    <header class="header header--main">
        <h1 class="header__title">CSS Architecture Exercise</h1>
        <nav class="header__nav">
            <ul class="header__list">
                <li class="header__item"><a href="#" class="header__link">Home</a></li>
                <li class="header__item"><a href="#" class="header__link">About</a></li>
                <li class="header__item"><a href="#" class="header__link">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main class="layout layout--container">
        <section class="card">
            <h2 class="card__title">Consistent Naming Convention</h2>
            <p class="card__content">Use a consistent naming convention like BEM (Block Element Modifier) for better readability and maintainability.</p>
        </section>

        <section class="card">
            <h2 class="card__title">Organize CSS Files</h2>
            <p class="card__content">Separate CSS files by components or features to improve scalability and collaboration.</p>
        </section>

        <section class="card">
            <h2 class="card__title">Low Specificity</h2>
            <p class="card__content">Keep specificity low to make overriding styles easier and avoid conflicts.</p>
        </section>

        <section class="card">
            <h2 class="card__title">Commenting</h2>
            <p class="card__content">Comment your code to explain the purpose of styles and make it easier for others (or your future self) to understand.</p>
        </section>
    </main>

    <footer class="layout layout--footer">
        <p class="footer__text">&copy; 2024 CSS Architecture Exercise</p>
    </footer>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

References:


Time to Build! ๐ŸŽฏ

Now it's your turn to put your learning into practice! Here's your challenge:

  • Create new CodePen (It's free at codepen.io)
  • Build the examples and exercises we covered
  • Share your creation! Drop your CodePen link in the comments below

Bonus Points: Add your own creative twist to the designs! I'll personally review and respond to every CodePen shared in the comments.

๐Ÿ’ก Pro Tip: Remember to add comments in your CSS to explain your thinking. It helps others learn from your code!


What's Next? ๐Ÿ“š

This is Part 2 of our CSS Zero to Hero series. We'll dive deeper into more exciting CSS concepts in upcoming posts. To make sure you don't miss out:

  1. ๐Ÿ“Œ Bookmark this post for quick reference when you're coding
  2. โค๏ธ Like this article if you found it helpful (it helps others find it too!)
  3. ๐Ÿ”” Follow me for the next parts of the series

Let's Connect! ๐Ÿค

Did you try the exercises? Have questions? Share your experience in the comments! I respond to every comment and love seeing your progress.

See you in Part 3! Happy coding! ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

๐Ÿ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay