DEV Community

Cover image for Top 10 CSS Tricks Every Front-End Developer Should Know
Ilham Bouktir
Ilham Bouktir

Posted on • Edited on

Top 10 CSS Tricks Every Front-End Developer Should Know

#css #frontend

CSS is a cornerstone of front-end development, offering endless ways to style and enhance websites. Below are 10 CSS tricks that can level up your projects.

1. Smooth Scroll Behavior

The scroll-behavior property controls how scrolling behaves when navigating to an anchor link. Setting it to smooth creates a fluid scrolling effect, improving user experience without JavaScript.

html {
  scroll-behavior: smooth;
}
Enter fullscreen mode Exit fullscreen mode

2. Clamp for Responsive Typography

The clamp() function sets a value between a minimum and maximum, ideal for responsive font sizes. It takes three arguments: minimum value, preferred value (often using vw for viewport scaling), and maximum value.

h1 {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}
Enter fullscreen mode Exit fullscreen mode

3. Aspect Ratio for Consistent Media

The aspect-ratio property defines a fixed width-to-height ratio for elements like images or videos. This ensures consistent proportions across screen sizes, especially in responsive layouts.

img {
  aspect-ratio: 16 / 9;
  width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

4. Custom Properties (CSS Variables)

Custom properties, defined with --name, allow you to store values (like colors) for reuse. They're scoped to an element (often :root for global use) and accessed with var().

:root {
  --primary-color: #007bff;
}

.box {
  background-color: var(--primary-color);
}
Enter fullscreen mode Exit fullscreen mode

5. Truncate Text with Ellipsis

The text-overflow: ellipsis property, combined with white-space: nowrap and overflow: hidden, truncates overflowing text with a "..." symbol, perfect for compact designs.

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
Enter fullscreen mode Exit fullscreen mode

6. Center Anything with Flexbox

Flexbox's justify-content and align-items properties align content along the main and cross axes. Setting both to center perfectly centers items in a container.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

7. Gradient Borders

The background property can layer gradients to create colorful borders. Using padding-box and border-box, you apply a gradient to the border while keeping the content area solid.

.box {
  background-image: linear-gradient(white, white),
              linear-gradient(to right, #ff6b6b, #4ecdc4);
  border: 2px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
Enter fullscreen mode Exit fullscreen mode

8. Sticky Positioning

The position: sticky property makes an element stick to its parent container until it scrolls out of view. The top property sets where it sticks relative to the viewport.

.header {
  position: sticky;
  top: 0;
  background: #fff;
}
Enter fullscreen mode Exit fullscreen mode

9. Filter Effects for Images

The filter property applies graphical effects like brightness, blur, or sepia to elements. It's great for hover effects or dynamic styling without image editing.

img:hover {
  filter: brightness(80%) sepia(20%);
}
Enter fullscreen mode Exit fullscreen mode

10. Scroll Snap for Carousels

The scroll-snap-type property enables snap points for scrolling, creating a carousel-like effect. scroll-snap-align on child elements defines where scrolling stops.

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.carousel > div {
  scroll-snap-align: start;
}
Enter fullscreen mode Exit fullscreen mode

These CSS tricks are powerful tools for any front-end developer. Experiment with them in your projects to create polished, efficient designs! Got a favorite CSS tip? Share it below!

Top comments (0)