Common Mistakes

CSS သင်ခါစမှာ error message မမြင်ရတာကြောင့် ဘာမှားနေလဲရှာရခက်တတ်ပါတယ်။ အများဆုံးဖြစ်တတ်တာတွေက selector မကိုက်တာ၊ semicolon မေ့တာ၊ specificity မတတ်တာ၊ mobile overflow ဖြစ်တာ၊ image width မထိန်းတာ၊ code block ကြီးတွေ screen ကျော်တာတွေပါ။

စစ်ရန် checklist

• Class name HTML နဲ့ CSS ထဲမှာ တူသလား?
• Property spelling မှန်သလား?
• Semicolon ; မေ့နေသလား?
• Parent width ကြောင့် child overflow ဖြစ်နေသလား?
• Mobile မှာ card တွေ stack ဖြစ်သလား?
• Text contrast ဖတ်လို့ရသလား?
• Button တွေ tap လုပ်ရအဆင်ပြေသလား?

CSS debug လုပ်တာက detective game လိုပါပဲ။ Clue တစ်ခုချင်းစီကိုစစ်ပြီး culprit ကိုရှာရတာပါ။

/* Good global reset for predictable sizing */
* {
  box-sizing: border-box;
}

/* Prevent images from breaking mobile layout */
img {
  max-width: 100%;
  height: auto;
}

/* Long code should scroll inside its own box */
pre {
  overflow-x: auto;
}

Common layout bug အများကြီးကို အခြေခံ reset နဲ့ကာကွယ်နိုင်ပါမယ်။