Dec 6, 2018 · 5 min read #Development · #CSS

Be "good" at CSS with these six things

Working at an office of developers, it’s a near weekly occurrence that I will hear “I hate CSS” or “I suck at CSS”. Granted, the majority of the time these aren’t front-end developers, but I’m not writing this article for them. This is more of a quick cheat-sheet for the others who want to get better and not be frustrated.

Before starting ANY project. Include a CSS reset like this one. Just do it.

1. “Instant” responsive-ness

Choose a single class to define your “container” or “wrapper” element and use this. Presto change-o you’re now responsive (for the most part). 

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
}

The 10px of padding will ensure that as the user’s screen size decreases your content will have a bit of breathing room on the side.

2. Global help

Initially setting every element’s box-sizing by default makes that elements defined width or height include it’s padding and borders. Extremely nice when you are trying to get pixel perfect and keep things simple.

And declaring every elements default position to “relative” will make your life easier down the road when you want to do absolute positioned child elements or small “nudges” to a single element. (e.g. adding “top: 2px;” to a Font Awesome icon)

And the third global helper is also a good way to begin a project. Just let images be large and let the browser set the ratio for your automatically. 

* {
  box-sizing:border-box;
  position: relative;
}

img {
  max-width: 100%;
  height: auto;
}

3. Don’t float, don’t inline-block. Use grid or flex-box.

Floating an element is asking for a lot of frustration. And inline-block will also give you a headache if you’re attempting to vertically align elements. So let’s use some modern ways of laying out a site.

The code below will take whatever immediate children there are of the class “flex” and make them equally spaced and fully contain their parent. 

<div class="flex">
  <span>Hello</span>
  <span>There</span>
</div>

.flex {
  display: flex;
  justify-content: space-between;
  align-content: center;
}

Want to easily create a sidebar instead of equally spaced elements? Done. 

<div class="flex">
  <span class="one">Hello</span>
  <span>There</span>
</div>

.flex {
  display: flex;
  align-content: center;
}

.one {
  flex-basis: 200px;
}

4. Line-height should be 150% of font-size.

This is a simple typography standard. Which version below looks better and is more easily readable?

css correct line height 
.flex {
  font-size: 18px;
  line-height: 27px;
}

5. Don’t over define

This one is more of what NOT to do with CSS.

I would venture to say that every site / application I inherit or take charge of has 50% more CSS than is what’s needed. Here is a REAL example of code I’m copying and pasting from a past project. 39 lines of CSS. 

.title {
  color:#ffffff;
  font-size:30px;
  text-align:center;
  font-weight:800;
  text-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
  line-height: 39px;
  padding-top:60px;
  padding-bottom: 20px;
  @media (max-width: 768px) {
    padding-top:60px;
    padding-bottom: 20px;
    color: #ffffff;
    font-size:60px;
    text-align:center;
    font-weight:800;
    text-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
    line-height: 69px;
  }
  @media (max-width: 370px) {
    font-size: 24px;
  }
}

.backgroundContainer {
  background-image: url('[url-here]');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
  width: 100%;
}

.col {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 15px;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 10px;
}

And here’s what it should look like in 24 lines. Not a 50% reduction, but you get the idea. A lot of CSS like padding, margin and background can have a single line of multiple declarations like “padding: 20px 10px 15px;”. 

.title {
  color: #fff;
  font-size: 30px;
  line-height: 39px;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 2px 4px 0 rgba(0,0,0,.5);
  padding: 60px 0 20px;
  @media (max-width: 768px) {
    font-size: 60px;
    line-height: 69px;    
  }
  @media (max-width: 370px) {
    font-size: 24px;
  }
}

.backgroundContainer {
  background: url('[url-here']') no-repeat bottom center;
  background-size: cover;
}

.col {
  padding: 20px 10px 15px;
  margin: 0 15px 10px;
}

6. White space is your friend

When in doubt give everything breathing room. This is general design concept that never fails. Below is an example of how I generally set all of my spacing at the beginning of a project immediately after the reset. 

h1, h2, h3, p, ul, ol, blockquote {
  margin-bottom: 20px;
}

h4, h5, h6, li {
  margin-bottom: 10px;
}

I hope these tips help those of you who “hate CSS”. If you only take away 1 thing from all of this, it’s this: reset first and try to keep it as simple as you can. Don’t over-define and over-declare your rule-sets.

&More Articles