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