CSS

[Holayn]

Using absolute properly: https://tailwindcss.com/course/positioning-the-dropdown-area

• positions against nearest non-static element (i.e. a "relative" element)

[Holayn]

CSS grid

https://css-tricks.com/snippets/css/complete-guide-grid/

[Holayn]

Utility first CSS (and making CSS scalable)

https://tailwindcss.com/docs/utility-first

• reduce css size considerably (external stylesheets are a render-blocking asset), and improves cache since the same stylesheet's being used across many app changes
  • no duplicate css classes and lines everywhere, rather using utility classes
• no worrying about making appropriate class names, or a lot of duplicate class names for small variations
• styling is together with the context (the markup)
• getting rid of application/component-specific styles, create UI out of tiny "lego blocks" of CSS
• scope is limited to the element onto which the classes are applied to and the styling is portable because that styling is not contextual

more reading:

• https://medium.com/@cole_peters/building-and-shipping-functional-css-4f29b947bcb9

• link

• https://acss.io/frequently-asked-questions.html#what-is-atomic-css-

• http://mrmrs.io/writing/2016/03/24/scalable-css/

• https://www.smashingmagazine.com/2013/10/challenging-css-best-practices-atomic-approach/

"Content semantics have NOTHING TO DO WITH VISUAL STYLES. When I used to build things with legos I never thought ‘oh this is a piece for an engine block’ I thought ‘oh cool this is a 1x4 blue lego and I can do anything I want with it’. It didn't matter if I was building an underwater aquanauts base or an airplane - I knew exactly how to use that lego block.

It’s all about lego bits. Because I never needed to re-contextualize my understanding of lego blocks. I could use them across ‘projects’ and they were always the same. I dream of this world in front-end development. I want lego blocks that work everywhere because there is serious power in leveraging solutions that are project agnostic."