DEV Community

loading...
Cover image for Amazing CSS Tips & Tricks

Amazing CSS Tips & Tricks

Tarandeep Singh
Learning Full-Stack Web Development | Sharing knowledge & resources along the way!
・2 min read

Wanna know how to use modern CSS features to write clean code by using some stunning CSS tricks? You have just landed at the right place!

A Tip For Beginners

Here's a quick tip for those who have just started to learn CSS - DON'T use Bootstrap or Tailwind! No doubt they are great tools to get a nice-looking UI quickly but using these will mean that you'll be missing on CSS fundamentals. I have personally done this mistake & oh boy did I regret it.

Grid is Great

Unlike flexbox which only deals with individual columns & rows, Grid allows you to think about the big picture. When you set an element to display: grid; you can then define its children as a bunch of columns & rows. Have a look at the amount of code we have eliminated by using grid instead of flexbox in the image below.
Grid vs flexbox image Click here to read more about CSS Grid Layout

CSS Debugging

We often use Chrome developer tools for debugging our code (including CSS) but you'll be surprised to know that Firefox developer tools are much superior especially when it comes to CSS. On inspecting an element in Firefox, you'll have a break-down of the box-model like you have in Chrome but you can also edit properties on it directly, for instance changing the padding or margin and it will also give you a breakdown of all the properties that are influencing the box-model. Not only this, Firefox also provides really nice graphics for flex & grid layouts.
Firefox dev-tool image

Image Filters

It's fun to play around with images in CSS, but did you know that we can apply amazing effects to those images. In fact CSS allows using lots of filters on the images to help developers play with the graphics without changing it in Photoshop. Let’s have a look at some of the filters:

.image img {
  max-width: 300px;
}

.blur {
  filter: blur(5px);
}

.grayscale {
  filter: grayscale(100%);
}

.brightness {
  filter: brightness(150%);
}

.saturate {
  filter: saturate(200%);
}

.invert {
  filter: invert(100%);
}

.huerotate {
  filter: hue-rotate(180deg);
}
Enter fullscreen mode Exit fullscreen mode



I have much more to write and share with you guys but it's getting a little long, so comment below if you want part 2 of Amazing CSS Tips & Tricks.

You can follow me on Twitter and LinkedIn.

Discussion (10)

Collapse
mr_bushido profile image
Pranav Nag

part two would be nice

Collapse
tarandeep_singh profile image
Tarandeep Singh Author

Sure man! Started work on it. ✨

Collapse
lucastvms profile image
Lucas Vieira

Part 2, please. O/

Collapse
tarandeep_singh profile image
Tarandeep Singh Author

Hey Lucas! Part 2 will be out today. Thanks ✨

Collapse
tarandeep_singh profile image
Tarandeep Singh Author

@stevehoskins @aaronbeach @mr_bushido @lucastvms PART 2 is out guys!πŸ₯³ Check it out: dev.to/tarandeep_singh/amazing-css... Hope you guys like it. ✨

Collapse
aaronbeach profile image
aaron-beach

Nice reference material. Part2 plz.

Collapse
tarandeep_singh profile image
Tarandeep Singh Author

Thank you so much! Part 2 will be out soon. πŸ’«

Collapse
tarandeep_singh profile image
Tarandeep Singh Author

PART-2 is out guys! Check it out: dev.to/tarandeep_singh/amazing-css...

Collapse
stevehoskins profile image
Steve Hoskins

Hi Tarandeep, yes part 2 would be great thanks. And by the way thanks for this anyway.

Collapse
tarandeep_singh profile image
Tarandeep Singh Author

Hey Steve! Thank you soo much for the appreciation. Really glad you liked it. And yes, part 2 will be out in few hours! πŸ’«