List of Common CSS mistakes and its Fixes.

List of Common CSS mistakes and its Fixes.

? Mistake 1 - Using Color name directly.

Fix - We can use color code instead of color name.

?Mistake 2 - Using absolute 'px' Unit?

Fix - We can use 'em' , 'rem' unit which helps to make responsive.

? Mistake 3 - Using unnecessarily long selector.

Fix - We can use simply 'ClassName' instead of unnecessarily?long selector.

? Mistake 4 - Using same code again and again.??

Fix - We can create variables , classes for reusable code which increases the readability of code.

? Mistake 5 - Not Using fallback fonts.

Fix - We can use default font as fallback fonts which help if given font is missing.

? Mistake 6 - unnecessarily?use of '!important'.

Fix - If we link stylesheet with proper order. We do not need '!important'.

? Mistake 7 - Illogical naming for classes and id.

Fix -?We can use BEM naming convention for writing cleaner and more readable CSS classes.

? Mistake 8 - Using Inline , internal CSS.

Fix -?We can use external CSS.

? Mistake 9 - Using CSS @import.?

Fix -?We can use CSS:link instead of @import.?

? Mistake 10 - Not organizing CSS.

Fix -?We can use some plugins to auto-organize CSS.

? Mistake 11 - Using Id instead of Classes.

Fix -?We should classes for CSS styling and id for JavaScript selector.

? Mistake 12 - Writing all CSS in one stylesheet.

Fix -?We can create a separate stylesheet for every utility.

? Mistake 13 - Not using CSS shorthand.

Fix - We can use CSS shorthand properties, which makes code more readable.

? Mistake 14 - Writing multiple CSS for removing default browser styling.

Fix - We can use reset CSS which removes default browser styling.

? Mistake 15 - Not validating CSS.

Fix - We can use online CSS validation.


Sufiya Khan

Associate Partner, Practice Leader: IX Customer Transformation at IBM

3 å¹´

Awesome , Great stuff

Radhika Dhumal

UI Developer | Frontend Developer | ReactJS Developer ?? | HTML | CSS | SASS | BootStrap | Tailwind | React JS | Responsive Web Design ?? | Cross Browser Compatibility | Animation | Accessibility | Performance

3 å¹´

Thank you

要查看或添加评论,请登录

社区洞察

其他会员也浏览了