10 things that you will learn when you make your own CSS component library

10 things that you will learn when you make your own CSS component library

Context:

Recently, I published the first version of my own CSS component library, eklavya. It is far from perfect, but the journey was filled with joy, pain, frustration and elation. All this not only made me realize why building/ coding is addictive, but also immensely improved my confidence and my knowledge.

Specific tips:

Overflow:

Works only on block elements which have height defined

Perfectly round border radius:

equal dimensions (width = height), border-radius: 50%

For text overlay and card with dismiss

W3Schools overlay

When I click on buttons/ input tags, an outline appears which is not removed if I set :active/ :focus border: none;

  1. outline, a CSS property
  2. outline: none should not be used as it makes the element inaccessible by keyboard

    Did you know?

    borders have sides. In my input field, I use border: none and `border-bottom: 2px solid var(--dark);

floating buttons:

  1. position sticky needs an offset relative to which it can stick. top, bottom, left or right.
  2. Apart from that, its parent should have height and overflow defined.

cursor: pointer not working:

  1. stackoverflow answer
  2. The above solution did not help me

    All of the above are either my observations or answers found online. If you think one of these is incomplete/ incorrect, feel free to rectify me in a pull request.

General lessons:

  1. It may sound obvious but don't jump in and start writing code before planning. In my case, even though I did plan the general layout of the website, many times, I found myself in design hell because I didn't plan ahead. Little components can cause chaos when they inherit parent's unwanted properties.
  2. Face the pain. Earlier, I had named all my classes in upper cases (CamelCase). Later, I had to change them to CSS conventions and it was painful. Components would break, weird properties would show up, I had to check everything multiple times (much respect to inspect element). And despite all of that, there might be some bugs left.
  3. Constant updates. I am not satisfied with things as they are. And will need to constantly refactor my code so that it works better and looks better.