TheLazy.Dev
Portfolio GitHub

Blog

css |javascript |webdev |codequality

I Love These CSS Tricks - Manage your CSS Much Better

justaashir

Aashir Khan

Posted on October 6, 2019

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:

💖 💪 🙅 🚩
justaashir
Aashir Khan

Posted on October 6, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

I Love These CSS Tricks - Manage your CSS Much Better
css I Love These CSS Tricks - Manage your CSS Much Better

October 6, 2019