CSS

Line Clamp

An essential snippet of code to have in your arsenal. No more CSS hacks or over engineered JavaScript solutions needed.

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
Updated: 19 January 2022

Multiple background images

Remember that the icon/image is declared after the colour. A good use case for this is image placeholders, for example you could have your company's logo above their brand grey.

.image-placeholder {
  background: #eff0f2 url('./icons/logo.svg');
}

/* alternatively we can define colour and image seperately for the same effect */
.image-placeholder {
  background-color: #eff0f2;
  background-image: url('./icons/logo.svg');
}
Updated: 19 January 2022

Using revert instead of underline

Say we have created a link with text-decoration: none and we want the underline to show on hover, instead of explicitly saying text-decoration: underline we can use revert so it falls back to the original "state".

a {
  text-decoration: none;

  &:hover {
    text-decoration: revert;
  }
}
Updated: 19 January 2022

Responsive CSS grid

Taken from the infamous CSS Tricks post A Complete Guide to Grid. This serves as a good starting point for setting up your responsive grid.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* This is better for small screens, once min() is better supported */
  /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
  grid-gap: 1rem;
  /* This is the standardized property now, but has slightly less support */
  /* gap: 1rem */
}
Updated: 6 February 2022

Background shorthand

Sometimes it can be a pain remembering the order of each background property (it gets me every time).

/* image, position, size and repeat */
body {
  background: url(sweettexture.jpg) top center / 200px 200px no-repeat;
}
Updated: 6 February 2022

Using revert instead of underline

Say we have created a link with text-decoration: none and we want the underline to show on hover, instead of explicitly saying text-decoration: underline we can use revert so it falls back to the original "state".

a {
  text-decoration: none;

  &:hover {
    text-decoration: revert;
  }
}
Updated: 6 February 2022

The Stack layout

Utilising the "Lobotomised Owls" selector we can create more consistent spacing between elements on our pages. Essentially we are telling the browser to only apply margin top to those elements which have a previous sibling.

.stack {
  --space: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-top: 0;
  margin-bottom: 0;
}

.stack > * + * {
  margin-top: var(--space);
}

references:

Updated: 6 February 2022

Animation Fill Mode both

I've always used forwards in the past because I never thought to explore the other options. As it turns out there is a both option, which means no more adding default styles before the keyframes animation!

.box {
  animation: slide-in 1000ms ease-out both;
  animation-delay: 500ms;
}
Updated: 6 February 2022

Delete local branches

When you have merged and deleted a branch on GitHub this command will delete the local branches that don't exist remotely.

git branch -vv | grep 'origin/.*: gone]' | awk '{print $1}' | xargs git branch -d
Updated: 6 February 2022