DEV Community

loading...
Cover image for My custom CSS Hacks

My custom CSS Hacks

urielbitton profile image Uriel Bitton ・2 min read

After many years of experience with UI and web design i have collected a small but nice list of my favoite CSS hacks that I use on pretty much every project, app or website.

I hope you can learn from this and use it in turn for your projects too.

Add your favorite CSS hacks in the comments below!

  1. Custom Grid
.grid {
    position: relative;
    margin: auto;
    width: 1200px;
}
@media(max-width: 1200px) {
.grid {
width: 95%;
}
}
Enter fullscreen mode Exit fullscreen mode

This allows you to set a custom grid to work inside and you can edit this grid for different device screen widths.

  1. Design a custom close icon
.close {
    position: absolute;
    padding: 5px;
    font-style: normal;
    font-weight: 600;
    transform: scale(1.4);
    cursor: pointer;
    width: 20px;
    height: 20px;
    transition: all 0.3s;
    z-index: 900;
}
.close::before {
    position: absolute;
    top: 4px;
    left: 12px;
    transform: rotate(-43deg);
    content: '|';
}
.close::after {
    position: absolute;
    top: 4px;
    left: 14px;
    content: '|';
    transform: rotate(43deg);
}
Enter fullscreen mode Exit fullscreen mode

I design a custom icon element and wherever i need to use it in my html i simply add this line:

<i class="close"></i>
Enter fullscreen mode Exit fullscreen mode
  1. CSS Vars

Some CSS can be long and hard to remmeber so i just store it inside a CSS variable and that's it.

:root {
--gradient: linear-gradient(324deg, rgba(119,0,255,1) 0%, rgba(41,4,255,1) 100%);
}
Enter fullscreen mode Exit fullscreen mode

I can then simply call it in my css like this:

.box { background: var(--gradient) }
Enter fullscreen mode Exit fullscreen mode
  1. Make everything border-box
* {
box-sizing: border-box
}
Enter fullscreen mode Exit fullscreen mode

this way all my elements will be uniform in dimensions and i don't have to worry about padding and borders and whatnot messing up with my widths and heights.

  1. Get a quick spacer element Sometimes i need to add a quick spacer between elements
.spacer { height: 60px }
Enter fullscreen mode Exit fullscreen mode

And i call it in my html:

<div class="spacer"></div>
Enter fullscreen mode Exit fullscreen mode
  1. Custom Scrollbars
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
} 
::-webkit-scrollbar-track {
    background: #eee; 
    border-radius: 50px;
}
::-webkit-scrollbar-thumb {
    background: green;
    border-radius: 50px;
}
Enter fullscreen mode Exit fullscreen mode

That one customizes scrollbars, pretty cool.

  1. Custom Highlighter
::selection {
    background: red;
    color: white;
}
Enter fullscreen mode Exit fullscreen mode
  1. Remove dependency on !important To remove dependencies on !important for cnflicting styles i simply make every selector very specific like:
.app .container .box h1 { color: green; }
Enter fullscreen mode Exit fullscreen mode

Instead of setting styles like

.app h1 {color:green;}
Enter fullscreen mode Exit fullscreen mode

Then if i need a more abstract style definition
i use:

.app h1 { color:green }
.app .container .box h1.title {color:red}
Enter fullscreen mode Exit fullscreen mode

Hope you enjoyed these!

You can add yours in the comments below, i'd love to hear from your!

Discussion (3)

Collapse
crinklesio profile image
Kevin Pennekamp

My all time favorite is the Owl selector of Heydon Pickering. It works so well for vertical rhythm in article pages, and its dead simple.

article > * + * {
  margin-top: 1.5rem;
}
Collapse
urielbitton profile image
Uriel Bitton Author

Ah yes I've read about that its pretty cool!

Collapse
melnik909 profile image
Stas Melnikov

Cool that you share your experience with us. But I see some approaches that is not good for a11y. Please, read more about a11y to improve your code.

Forem Open with the Forem app