Changing my perspective towards CSS!

In my opinion, building your own version of the CSS component library is the best way to learn and polish your skills in CSS. With every component you build, you will start understanding several tidbits related to CSS. As I started building my own component library I got to know a few really important concepts of CSS which I had often ignored otherwise. For me, CSS was more of a hit-and-trial method earlier!

Now let’s see a few important things that I learned and a few transitions that I brought in my CSS coding practices while building my own version of the CSS library.

Changing my responsiveness game!

One of the biggest transitions that I have brought to my CSS coding is switching on to rems from pixels. Earlier I used to use pixels everywhere and used to always struggle while making websites responsive.

But now after knowing how rems can make the responsiveness game a lot easier, I have completely switched on to rems. Just by setting your root font size to 62.5% (which is nothing but 10px only ) and putting ‘font-size:50%’ in your media queries your responsiveness game changes totally!

16px=100% of viewport
therefore, 10px=(100 * 10)/16 =62.5%

Exploring more about widths!

I always considered width auto and width 100% did the same task of allowing the container /div to take the entire space of the parent container/div. But no, the difference between them lies in paddings and margins. Width 100% will take extra space of paddings and margins that are added as well.

Specificity

Earlier when I applied styles to elements, few of them used to get applied and few of them not. I always thought that there’s some kind of magic happening in this XD. But at that time little did I knew about specificity! Suppose if you have 2 or more CSS rules that point to the same element then the selector with the highest specificity value will be considered. For calculating specificity following order is considered,

inline id class element

Suppose if you have a p tag and a class is also given to it.

<p class="text">Hello world</p>

consider following CSS is applied,

p{
 color: red;
}
p.text{
 color: green;
}

for the first selector, the specificity will be (0,0,0,1)

And for the second selector, the specificity is going to be (0,0,1,1)

So the second selector has a higher specificity and that is why it wins !The text is finally applied a green color. This was a very basic example.

Understanding units!

Whichever unit you use, ultimately everything is calculated back to pixels. It is generally done by going through the following calculations,

1. Declared value( author declarations)
2. cascade value(after resolving conflicts)
3. Specified value (default value, if no cascade value is found)
4. Computed value
5. Used value(final calculation)
6. Actual value

You can read more about this in this article https://css-tricks.com/computed-values-more-than-meets-the-eye/

Sources of stylesheets

1. Author/Developer Stylesheets- Stylesheets created by developer
2. User Stylesheets- Stylesheet given by the user/person using that app or site.
3. User agent/Browser Stylesheet- Stylesheet given by the browser. For eg ul, input etc.. have some predefined styles given to them by the browsers.

Dealing with Images!

Dealing with images was one of the most difficult tasks for me until I understood that just setting width:100% and height: auto can be the easiest way to make images responsive! When dealing with other images you have to consider things like density switching, art direction and resolution switching. Images can be made responsive considering these above stated factors. You can read about this in detail here, https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/

Stacking Context and z-index!!!

Earlier I knew what z-index is, but never knew that there’s something called as stacking context.

A stacking context is nothing but a 3-D conceptualization of HTML elements along imaginary z axis relative to the user.

Putting opacity as a negative value or using transform you can create stacking context.

You can read more about this, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Flex-Boxes VS Grids

I was a total flexbox person until I came to know the power of CSS grid areas.CSS grid areas can help you to build responsive layouts even more easily and fast.

CSS coding methodologies.

Naming your classes is sometimes difficult and tedious right! I always used to struggle to name my classes. But after knowing about BEM and OOCSS my job of naming classes has become a lot easier. Although sometimes still I get confused while using these two techniques, I find following a naming convention makes your code structured and easy to read indeed. I came across a very nice blog related to this , https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

CSS behind the scenes!

Well up until now we saw what was happening in the CSS foreground. Now lets understand few behind the scenes concepts of CSS.

This is what happens in the background,

Visual Formatting model is a model that runs in the browser that calculates boxes and determines layout of these boxes for each element in the render tree in order to determine final layout of the page.

There are a lot of processes that take place in the background before a web page is displayed on the screen like, the browser creates DOM tree (it contains all the information about HTML nodes in form tree), CSSOM tree(it contains information about how elements are styled)and render tree ( which is combined version of both of the trees).

I came across an amazing article that has explained all these things in an extremely easy way. You can have a look at it here,

How browser rendering works - behind the scenes - LogRocket Blog

Well this was all about what I learned while building my component library. My library might be having lots of flaws! And I am slowly encountering them while using the components in my own web app. Gradually trying to rectify them and trying to improve it at every moment !

Now my perspective towards CSS has changed totally and I am slowly putting an end to my hit and trial method in CSS! I have realized that CSS is not just padding, margins and typography and has a lot more to it.

Link to my CSS library: https://adorn-ui.netlify.app/

Github Link: https://github.com/shrushti2000/Adorn-UI

That’s it for this blog! It’s practically impossible to list down all the things that I learned because there were so many things XD, but these were some of my very important learnings and transitions in CSS coding techniques.

Thanks for reading it till the end.

Happy coding! Happy learning!

Feel free to connect with me on Twitter , LinkedIn ,and Github