Tips for Writing Modern CSS

This article demonstrates CSS tips and code examples to improve your CSS (Cascading Style Sheets) writing ability and create awesome websites.

Undoubtedly, CSS evolved over the past few years, and one of the factors for this is the introduction of responsive web design. If you aren’t familiar with responsive web design, it refers to designing websites that respond to different devices’ screen layouts to provide a top-notch user experience. Thanks to the arrival of CSS3, we now have the luxury of working with tons of features, all aimed at helping to create responsive websites with ease.

In this post, we’ll share some tips for writing modern CSS and give you an insight into the best practices for writing CSS codes like a pro. We also have a more in-depth tutorial in writing CSS. Direct Link →

Ten Tips for Writing Modern CSS with ease

Some of the most useful tips to tryout out include:

Looking out for margin collapse

Always watch out for margin collapse. Unlike other coding properties, vertical margins often collapse when they interject. Hence, when the bottom margin of an element touches the top margin of another element, only the biggest of the two would survive.

<div class="element one"></div>
<div class="element two"></div>

.element {
  width: 250px;
  height: 250px;
}

.one {
  background-color: #ff2052;
  margin-bottom: 125px;
}

.two {
  background-color: #fee715ff;
  margin-top: 60px;
}

Instead of 185px between the two elements classified above, we have only 125px; the margin of element two isn’t taken into consideration here. But there are ways to battle this action, but it’s better to work with it and take advantage of the margins. Make sure the margins are in the same direction.

Doing a CSS reset

Though this has been resolved, there’s still a lot of variation in how web browsers behave. But the ideal way to solve any problem relating to the browser’s response to codes is by applying a CSS reset. Doing this sets a universal default value for the fundamental elements present in your line of codes, thus allowing you to work on a clean stylesheet that’s bound to yield the same result across all browsers.

Mini reset and normalize.css are just some libraries that do this perfectly, correcting all browsers’ flaws and inconsistencies. But if using a library isn’t your thing, then use this essential style to reset your file’s CSS:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Using Images as background

Have you tried using images as background? You probably have! However, when adding a background image to your work, especially if you wish to make the image responsive, you’ll need to use a <div> tag coupled with the background CSS property rather than the <img> HTML element.

Harnessing the box-sizing feature

Most newbie developers are oblivious of the importance of the box-sizing CSS property, and they don’t also know how important it is when writing modern CSS. The best way to grasp the concept behind this element is to learn its two possible values, and the first is the border-box.

The border-box padding and border are included in the width and height of the element it’s assigned to. Imagine you have <div> element that has a width of 200px; coupled with a box-sizing: border-box; the element in question will be 200px wide no matter the padding or borders you add to it. The second one is the content box which is the default setting of the two. However, this sets width and high to an element, unlike the border-box option.

Writing more-structured comments

But CSS isn’t a programming language, so why do I need to write comments? Well, though CSS might not necessarily be a programming language, it’s still a code – one that needs to be properly documented. So adding simple comments to your lines of CSS codes will help you create a well-structured piece for yourself and make your style sheet more organized. In addition, writing better comments will make your lines of code easily accessible for you later on and your colleagues.

/*
This is a comment in CSS with multiple lines.
Second line of the comment!
*/

Writing proper class names and ids.

There’s an unwritten rule for class names and ids, and it states that classes and ids should be written with a hyphen when they contain multiple words. Unfortunately, CSS is very case-sensitive, so using elementOne is not possible.

Always use a library.

There’s no need for DIYs when working with CSS. That’s why you’ve got CodePen and GitHub. Without a doubt, the CSS community is humongous, and new libraries are coming out daily. This community serves different purposes, from a few blocks of codes to help solve a particular problem on a section of your website to a full-blown framework for building functional apps. Interestingly, most of these codes are open-source, so, like I said, why do you need to DIY everything?

Selector Specificity should always remain low.

Always keep selector specificity low. Do you know what that means? CSS selectors vary. Newbie developers often expect these selectors to overwrite everything above them when they write CSS. But that’s not the case.

<a href='#' id='button' class="active">Active Button </a>

a {
  color: #ccc;
  padding: 15px;
}

a#button {
  background-color: #ff0000;
}

a.active {
  background-color: #00008b;
}

The goal here is to add the .active class to button elements in your project and make them #00008b (color code for a purplish color). Unfortunately, it won’t work. Why? The button used in this example has its background color set using an ID selector also. Thus, ID has a higher selector specificity. So, how do you resolve this? Study the rule below:

ID > Class > Type

ID = #id
Class (.class)
Type (header)

The ID selector has the highest priority, with the class coming in second, and selecting an element by its type is last.

Don’t be afraid to experiment with Em, Rem, and Px

Rem, Em, and Px – there’s a lot of back and forth between developers on the ideal option. For example, what’s the best choice for setting the size of a text or an HMTL element? However, there need not be a debate about this as developers and projects differ. So, there’s no use setting rules on when and how to use which. However, some tips to consider when using any of these values include:

Rem: Relative to the font size of the element in question, rem make it easy to scale all paragraphs and headings on a web page. However, it leaves the element with its default setting.
Px: This is the most used option on the list. It gives you a precise setting though it offers no scaling when used in a responsive environment.
Em: 1 em is relative to the font size of the text’s direct parent. It is used in media queries and remains a great option when designing a responsive website or application.

Note: Rem, px, and em are not the only value types for defining the size of typography or an element. You can also use the viewport units. We’ve written an article on viewport units you can checkout. Direct Link →

Always look out for compatibility issues.

These web browsers still have compatibility issues, lots of them. There are free platforms online that help check if the code you’re trying to run is widely supported, if it causes bugs in a particular browser or if it just needs prefixes. Asides from checking online, you should also do tests manually as sometimes, something as relatively minutes as a CSS layout may break for no reason.

So, what do you think? If you’ve got more to add to these tips or disagree with any of them, feel free to share.