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)

Read next

blackgirlbytes profile image

How to Extend your AI Agent for Custom Developer Workflows

Rizèl Scarlett -

mlamina profile image

Why pinning your dependency versions matters

Marco Lamina -

asvid profile image

The Stoic Engineer's Guide to Technical Debt

Adam Świderski -

amitkumar13 profile image

Memory Leak Detection in React Native with LeakCanary

Amit Kumar -