DEV Community

Fred B.
Fred B.

Posted on • Edited on

CSS Cheat Sheet

Misc.

  • Use transform: translate instead of top, left, right, bottom positioning, especially when animating
  • box-sizing: border-box;
  • object-fit: contain; /* maintains aspect ratio */
  • place-items: center;
  • user-select: none;
  • pointer-events: none;
  • height: 20vw;
  • box-shadow: 0 4px 60px rgba(0, 0, 0, 0.5); 
body::-webkit-scrollbar { /* NICE TRICK : it hides the scrollbar, but the scrolling behavior is maintained*/ display: none; }
Enter fullscreen mode Exit fullscreen mode

Media Queries

Targeting Touch devices 

/* For touch devices */ @media (hover: none) { .mainLayout__sidebar { padding-bottom: var(--main-layout-footer-height); } .mainLayout__body { height: calc(100vh - var(--main-layout-footer-height)); } }
Enter fullscreen mode Exit fullscreen mode

Grid & Flex layouts

For those landing here looking for a way to have a sort of dynamic table, with items wrapping to new rows, and still being aligned across rows, a pretty good solution is to use flex with flex-wrap:

.container { width: 100%; display: flex; flex-wrap: wrap; align-items: center; }
Enter fullscreen mode Exit fullscreen mode

CSS custom variables 

:root { --main-font-color: white; --main-theme-color: 0, 0, 0; --main-background-color: 4, 4, 4; --main-interactive-text-color: #b3b3b3; }
Enter fullscreen mode Exit fullscreen mode

CSS animation 

.someClass{ animation: name duration timing-function delay iteration-count direction fill-mode; } @keyframes wheel { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } }
Enter fullscreen mode Exit fullscreen mode

REM units 

10px = 0.625rem 12px = 0.75rem 14px = 0.875rem 16px = 1rem (base) 18px = 1.125rem 20px = 1.25rem 24px = 1.5rem 30px = 1.875rem 32px = 2rem
Enter fullscreen mode Exit fullscreen mode

Examples :

html { font-size: 16px; } h1 { font-size: 2rem; /* 32px */ } p { font-size: 1rem; /* 16px */ } li { font-size: 1.5em; /* 24px */ }
Enter fullscreen mode Exit fullscreen mode 
html { font-size: 62.5%; /* This makes a better base for REM units AND for accessibilty font adaptation*/ }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)