It's been a while I haven't write on CSS. So, Hello Developers, Today we are going to see "5 Steps To Improve Your CSS" where these all steps will be very helpful to you. Let's see all of them...
Wrap your mind around POSITIONING contexts
If you want to have a solid understanding of how to use CSS to move HTML elements to where you want them to go, you absolutely must get a grip on positioning contexts. And I don't just mean a casual understanding, I mean deep knowledge of their differences, behaviors, quirks, etc.
There are five positions values that you should understand here they are:
- static
- fixed
- relative
- absolute
- inherit
But here the big two that will change the way are absolute and relative positioning.
When you're first learning CSS, floats seem like one of the most screwed up layout systems imaginable. Once you learn to use them on a basic level, you then have to learn all about how parents containing only floated children have a collapsed height, which then leads to forty-seven different ways to solve the problem through clearfixes and overflow manipulations.
(Use as little as possible)
Know you selectors
One of the keys to writing good clean CSS is to have a strong grasp of what CSS selectors are available to you, how they work and the degree to which they are supported on various browsers, It sounds like a simple enough topic, but in reality, the world of CSS selectors is quite complex.
(Spend some extra time for its practice)
Learn Dry Coding concepts
"Don't Repeat Yourself." This simple phrase has drastic implications when it comes to coding. When you dive into DRY coding practices, the result is cleaner code, less work and a beautiful new workflow that is as empowering as it is flat out awesome. Unlike the other topics above, which are fairly narrow, this one is a pretty vast subject that covers all manner of different practice, techniques and idea.
(Try to use shorthands)
Know your browser support
The fifth and final key to improving your CSS is to know what works here. CSS3 is far too enticing for most of us to ignore, but the hard truth is that a whole bunch of it doesn't work in the certain browser (by "certain browser" I, of course, mean IE).
The big secret that newbie web devs need to get into their heads is not that they need memorize every single CSS feature and how every browser known to man handles it, instead of its that there are amazing resources available to you that give you this information freely, you just have to know where to look.
Recap
- Wrap your mind positioning
- Contexts
- Master floats
- Know your selectors
- Learn DRY Coding concepts
- Know your browser support
Resource:
⚡Thanks For Reading | Happy Designing😎