loading...
Cover image for I Love These CSS Tricks - Manage your CSS Much Better

I Love These CSS Tricks - Manage your CSS Much Better

justaashir profile image Aashir Aamir Khan ・2 min read

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:

Some of my Popular Articles:

Posted on by:

justaashir profile

Aashir Aamir Khan

@justaashir

Branding @justifyagencyhq ✨ @vuejs developer ✨ Technical Writer ✨ Super Motivated ✨ UI/UX ✨ Branding Enthusiast 🎉

Discussion

markdown guide
 

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

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

 

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