Generic CSS I Keep When I Create My CSS From Scratch

I love designing websites and I’ve designed plenty of sites to start to realize there are certain CSS tricks I always keep on my master sheet to make my life easier. A lot of the time, if I’m building my CSS from scratch, they’re always a copy and paste. I’m not a pro by any means, so take my advice with a grain of salt.

Defaults

In my index.css or master.css I usually have the following below.

* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: <Font of Your Choice>;
}
html,
body {
width: 100%;
height: 100%;
}

Reason:

Everything has their own padding and margin size and by simply setting your own padding and margin with box-sizing set to border-box, everything manually will allow you to perfectly align items better. Setting width & height of html & body to 100% will allow you to set a background wallpaper, without it seeming like a website from when the internet first came out.

Classes

Also in my index.css or master.css are these classes. They really help when I need some obscure random spacing or size.

Space

.space-small {
heigth: 3em;
}
.space-medium {
height: 5em;
}
.space-large {
height: 8em;
}

Reason:

There are times when I need some space between divs, but it’s a unique situation and padding isn’t going to cut it.

Icon

.icon-small {
width: 3em;
height: 3em;
}
.icon-medium {
width: 5em;
height: 5em;
}
.icon-large {
width: 8em;
height: 8em;
}

Reason:

Sometimes you make a call from an API and get returned images that are random sizes. So you you just want them all to be a specific size, you can just add these into it and you’ll have them all a certain length.

Align

.left {
float: left;
}
.right {
float: right;
}
.center {
align-text: center;
margin-left: auto;
margin-right: auto;
}

Reason:

Sometimes you just need a quick way to set something to the left, right or center of the page and these come in handy time to time.


So these are some of my tips and tricks, of course it’s also created to encourage you guys to not be afraid to build your own CSS classes that you really helpful for when you code. I hope you guys liked it!

Like what you read? Give Mohammed Chisti a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.