The CSS Shorthands - Part 1??
TLDR; You can scroll to snippets directly.
The best thing about CSS is, it keeps on evolving. In the modern era of technologies where people are introduced to a new thing on daily basis, the world full of libraries and frameworks. It's kind of hard to update the core, as the modern framework already released those features, and folks are hooked to them. But that's definitely not the case for CSS, the creators keep on introducing new property and shorthand while maintaining the legacy, which is the true power and beauty for CSS.
In this read you gonna know about recently rolled out property and shorthand's which will definitely surprise you and make your struggle easier as it was never before. (sounds like Tim cook introducing new iPhone ??)
Mostly, UI developer's just adopting frameworks only for ease of development (as they don't want to mess around the code) and of course for ready-made components (like form elements, grid layouts, etc.) but have you ever thought large availability of components and functionalities comes along with large codebase and I just think you never utilized all that code. So, it's a kind of overkill dependency on your project, will surely force you to the performance and optimization issues.
Now, you think we would not use those libraries and frameworks at all in our projects. Definitely not, I am not saying to reinvent the wheel again and re-write every piece of code. These things are meant to be used but you should always know the cons sides as well. BTW these are the typical common problems you face when introduced to UI Development and can be solvable with package bundler and task runners. I will this in my next write-up.
So, let's focus on shorthand for some common tasks which we use extensively use our everyday code.
- Padding-Vertical/Horizontal
Note: Same will be applicable for Margins and Borders also.
2. For Position Coordinates
3. Media query as Mathematical expressions
Hope you learn something new, just leave a like for more such blogs.
Next, will cover CSS Grid for Designers, and apply those things to a Page Layout.