I Love These CSS Tricks - Manage your CSS Much Better

#css #javascript #webdev #codequality

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
  /* ----------------------------- */ `

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;
}

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 ]">

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

Specificity and Readability

ul.nav{}
/* ul*/.nav {}

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: