Thet Hmuu
Caleb's Blog

Caleb's Blog

6 Common CSS Mistakes You Should Avoid

Thet Hmuu's photo
Thet Hmuu
·Oct 29, 2021·

2 min read

6 Common CSS Mistakes You Should Avoid

1. Using random ‘px’ numbers

Margin, padding, widthစတာတွေကို design systemတစ်ခုမသတ်မှတ်ဘဲ 1pxစီလောက်လိုတိုး ပိုလျှော့လုပ်ပြီး အဆင်ပြေတာကောက်မသုံးလိုက်သင့်ပါဘူး။ consistencyမရှိတဲ့အတွက် maintainလုပ်တဲ့အခါ ဟိုဟိုဒီဒီညှိရင်း အချိန်ပိုကုန်ပါလိမ့်မယ်။ Bootstrap, Tailwindစတဲ့ frameworkတွေမှာ 1rem, 1.25rem, 1.5remစသဖြင့် အချိုးကျကျပေးထားတာကို နမူနာကြည့်နိုင်ပါတယ်။

❌ Don’t do this

margin-top: 37px;
padding-bottom: 1.22rem;
width: 211px;

☑️ Do this

margin-top: 32px; // or 2rem
padding-bottom: 18px; // or 1.25rem
width: 240px; // or 50%

2. Mixing container and content styles

content or componentတွေက ပုံစံတူတစ်သတ်မှတ်တည်းရှိသင့်တာမို့ locationနဲ့ဆိုင်တဲ့styleတွေဆိုရင် container or wrapperမှာပဲ သီးသန့် သတ်မှတ်ပေးသင့်ပါတယ်။ ဒါမှ component styleတွေက နေရာတိုင်းမှာ reusableဖြစ်မှာပါ။

❌ Don’t do this

.form-input {
font-size: 16px;
padding: 8px;

/* mixing container with content here */
margin-bottom: 20px;
}

☑️ Do this

.form-group {
margin-bottom: 20px;
}
.form-input {
font-size: 16px;
padding: 8px;
}

3. Using fixed values for line height

Line heightက font sizeနဲ့ အမြဲတမ်းrelateဖြစ်နေသင့်ပါတယ်။ fixed valueမသုံးဘဲ flexibleဖြစ်တဲ့ unitlessကိုပဲသုံးပါ။ အဲဒါမှ font sizeအပြောင်းအလဲပေါ်မူတည်ပြီး autoချိန်ညှိသွားမှာပါ။ အထူးသဖြင့် မြန်မာစာလုံးတွေမှာဆို line heightက မဖြစ်မနေချိန်ပေးရတတ်ပါတယ်။

❌ Don’t do this

p {
  font-size: 18px;
  line-height: 24px;
}

☑️ Do this

p {
  font-size: 18px;
  line-height: 1.5;
}

4. Using loose class names

အလွယ်ပေးထားတဲ့ class nameတွေကြောင့် class nameတွေ များလာရင် ခွဲခြားရ ခက်လာမယ်၊ မထင်မှတ်ဘဲ နာမည်တူသုံးပြီး overrideလုပ်မိတာမျိုးတွေ ဖြစ်လာပါလိမ့်မယ်။ meaningfulဖြစ်တဲ့ descriptiveဖြစ်တဲ့ nameတွေကို ကြိုးစားသုံးသင့်ပါတယ်။

❌ Don’t do this

.user {}
.modal {}
.list {}

☑️ Do this

.user-card {}
.details-modal {}
.contact-list {}

5. Using overly complicated selectors

specificityကြောင့် elementအဆင့်ဆင့် compoundလုပ်ပြီး selectလုပ်တာကောင်းပေမယ့် တစ်ခါတလေမှာ class nameလေးသီးသန့်ပေးလိုက်တာက ရိုးရှင်းပြီး ပိုအလုပ်တွင်ပါတယ်။ ❌ Don’t do this

nav ul li a {
 color: #008080;
}

☑️ Do this instead

.nav-item {
 color: #008080;
}

6. Not organizing style declarations

declarationတွေကို သူ့အစုလေးနဲ့သူ တူရာတူရာ အပေါ်အောက်စုစည်းထားသင့်ပါတယ်။ ဒီလိုလုပ်တဲ့အတွက် Large css fileတွေကို ရေးရပြင်ရတဲ့အခါ ပြင်ချင်တဲ့style declarationကို အပေါ်တက်လိုက် အောက်ဆင်းလိုက်နဲ့ လိုက်ရှာရတဲ့ဒုက္ခကို ကြိုကာကွယ်ပေးပါလိမ့်မယ်။ Thank me later!

❌ Don’t do this

h1 {}
.profile-card {}
.btn-outline {}
h3 {}
.btn {}

☑️ Do this instead

h1 {}
h3 {}
.profile-card {}
.btn {}
.btn-outline {}

That's all for now. Have a good time writing CSS. 🤠

References
George Moller
Kevin Powell

 
Share this