DEV Community

Cover image for I Love These CSS Tricks - Manage your CSS Much Better
Aashir Aamir Khan
Aashir Aamir Khan

Posted on

I Love These CSS Tricks - Manage your CSS Much Better

I was a little busy around these days(School HomeWork), But I am writing this article today. These days I learned a lot about Design Systems (Atomic Design) I will definitely write a post about this. I was really wasting time choosing different design components but There are lots of PatternLibraries available. Today I will share some CSS Tricks I am using Right now:

Titling the Sections

You can organize your CSS Sections Like This:

\* ------------------------------- *\
      #SECTION-TITLE
  /* ----------------------------- */ `
Enter fullscreen mode Exit fullscreen mode

The title of the section is prefixed with a hash (#) symbol to allow us to perform more targeted searches (e.g. grep, etc.): instead of searching for just SECTION-TITLE—which may yield many results—a more scoped search of #SECTION-TITLE should return only the section in question.


Alignment

You can Align common or related declarations like this :

.foo {
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}
Enter fullscreen mode Exit fullscreen mode

It can really help you understand properties better and easily readable.


Organizing Classes

This is not a CSS Trick but it's somehow related to CSS, and it will only work if you are using HTML attributes with quotes (single or double). 95% of coders use quotes for attributes for better support. You can organize CSS Classes by using [ ] Square Brackets.

div class="[ box box-green] [ bio bio-long ]">
Enter fullscreen mode Exit fullscreen mode

It will be really helpful to organize Custom Classes and Framework Classes differently.

Specificity and Readability

ul.nav{}
/* ul*/.nav {}
Enter fullscreen mode Exit fullscreen mode

We use CSS selectors to specify like this ul.nav or div.nav. But sometimes you can be stuck within the Specific Design. But you can use an approach like this /*ul*/.nav. It stills gives you the idea of what element you are using in DOM and improves the readability and increase the Specificity.


I just featured 3 tricks and they are really useful. You can read the entire Style Guide here https://cssguidelin.es/. That's all There are some of The Information about me:

Some of my Popular Articles:

Discussion (4)

Collapse
kaos profile image
Kai Oswald

What I found most useful for structuring CSS was when I started using SASS.

Nested CSS and the option to file-split were gamechanging.

Collapse
justaashir profile image
Aashir Aamir Khan Author

Yep, I was shocked by SCSS because I was ignoring it from quite a long time. But It's life-changing

Collapse
aminak profile image
Amin Akmali

Thank you

Collapse
justaashir profile image
Aashir Aamir Khan Author

Thank You! For Reading this Article