30 CSS Best Practices for Beginners (2023)

12 likes

CSS is a language that is used by nearlyevery developer at some point. While it's a language that we sometimes take for granted, it is powerful and has many nuances that can help (or hurt) our designs. Here are 30 of the best CSS practices that will keep you writing solid CSS and avoiding some costly mistakes.

1. Make It Readable

The readability of your CSS is incredibly important, though most people overlookwhyit's important. Great readability of your CSS makes it much easier to maintain in the future, as you'll be able to find elements quicker. Also, you'll never know who might need to look at your code later on.

2. Keep It Consistent

Along the lines of keeping your code readable is making sure that the CSS is consistent. You should start to develop your own "sub-language" of CSS that allows you to quickly name things. There are certain classes that I create in nearly every theme, and I use the same name each time. For example, I use.caption-rightto float images which contain a caption to the right.

Think about things like whether or not you'll use underscores or dashes in your IDs and class names, and in what cases you'll use them. When you start creating your own standards for CSS, you'll become much more proficient.

3. Start With a Framework

Some design purists scoff at the thought of using aCSS frameworkwith each design, but I believe that if someone else has taken the time to maintain a tool that speeds up production, why reinvent the wheel? I know frameworks shouldn't be used in every instance, but most of the time they can help.

Many designers have their own framework that they have created over time, and that's a great idea too. It helps keep consistency within the projects.

At the same time, I would also like to say that you should use frameworks only if you already know a good deal of CSS. There will almost certainly come a time when you will have to create a certain aspect of some layout all by yourself, and your deep understanding of CSS will help you get things done.

• Introduction to Tailwind CSS: A Utility-First CSS FrameworkAdi Purdila17 Jul 2019

4. Use a Reset

Most CSS frameworks have a reset built in, but if you're not going to use one, then at least consider using a reset. Resets essentially eliminate browser inconsistencies such as heights, font sizes, margins, and headings. The reset allows your layout to look consistent in all browsers.

TheMeyerWebis a classic reset.Normalize.cssis another very popular reset.

5. Organize the Stylesheet With a Top-Down Structure

It always makes sense to lay your stylesheet out in a way that allows you to quickly find parts of your code. I recommend a top-down format that tackles styles as they appear in the source code. So an example stylesheet might be ordered like this:

1. Generic classes (body,a,p,h1, etc.)
2. #header
3. #nav-menu
4. #main-content

It also helps if you keep track of different sections of the website in the stylesheet with comments.

/****** main content *********/styles go here.../****** footer *********/styles go here...

6. Combine Elements

Elements in a stylesheet sometimes share properties. Instead of rewriting previous code, why not just combine them? For example, your h1,h2, andh3elements might all share the same font and color:

h1, h2, h3 {font-family: tahoma, color: #333}

We could add unique characteristics to each of these header styles if we wanted (i.e. h1 {size: 2.1em}) later in the stylesheet.

7. Create Your HTML First

Many designers create their CSS at the same time they create the HTML. It seems logical to create both at the same time, but actually you'll save even more time if you create theentireHTML mockup first. The reasoning behind this method is that you know all the elements of your site layout, but you don't know what CSS you'll need with your design. Creating the HTML layout first allows you to visualize the entire page as a whole, and allows you to think of your CSS in a more holistic, top-down manner.

8. Use Multiple Classes

Sometimes it's beneficial to add multiple classes to an element. Let's say that you have adiv"box" that you want to float right, and you've already got a class.rightin your CSS that floats everything to the right. You can simply add an extra class in the declaration, like so:

<div class="box right"></div>

You can add as many classes as you'd like (spaceseparated) to any declaration.

This is one of those situations where you have to take individual cases into account. While it is helpful to create class names that provide some hint of how they affect the layout, you should also avoid using class names that require you to constantly switch between HTML and CSS.

Be very careful when using ids and class-names like "left" and "right." I will use them, but only for things such as examples in blog posts. How come? Let's imagine that, down the road, you decide that you'd rather see the box floated to the left. In this case, you'd have to return to your HTML and change the class name—all in order to adjust thepresentationof the page. This is unsemantic. Remember: HTML is for markup and content. CSS is for presentation.

If you must return to your HTML to change the presentation (or styling) of the page, you're doing it wrong!

9. Use the Right Doctype

The doctype declaration greatly affects whether or not your markup and CSS will validate. In fact, the entire look and feel of your site can change greatly depending on the doctype that you declare.

Learn more about which doctype to use atA List Apart. You can simply start using<!DOCTYPE html>when creating pages based on HTML5.

10. Use Shorthand

You can shrink your code considerably by using shorthand when crafting your CSS. For elements like padding, margin, font, and some others, you can combine styles in one line. For example, a div might have these styles:

#crayon {margin-left:5px;margin-right:7px;margin-top:8px;}

You could combine those styles in one line, like so:

#crayon{margin: 8px 7px 0px 5px; // top, right, bottom, and left values, respectively.}

If you need more help, here's acomprehensive guide on CSS shorthand properties.

11. Comment Your CSS

Just like any other language, it's a great idea to comment your code in sections. To add a comment, simply add/*behind the comment, and*/to close it, like so:

/* Here's how you comment CSS */

12. Understand the Difference Between Block and Inline Elements

Block elements are elements that naturally clear each line after they're declared, spanning the whole width of the available space. Inline elements take only as much space as they need, and don't force a new line after they're used.

Here are the lists of elements that are typically inline:

span, a, strong, em, img, br, input, abbr, acronym

And the block elements:

div, h1...h6, p, ul, li, table, blockquote, pre, form

13. Alphabetize Your Properties

While this is more of a frivolous tip, it can come in handy for quick scanning.

#cotton-candy {color: #fff;float: left;font-weight:height: 200px;margin: 0;padding: 0;width: 150px;}

This is a bit controversial because you have to sacrifice speed for slightly improved readability.However, you should not hesitate in trying it out if you think it will help you.

14. Use CSS Compressors

CSS compressors help shrink CSS file size by removing line breaks, white spaces, and combining elements. This combination can greatly reduce the file size, which speeds up browser loading. CSS MinifierandHTML Compressorare two excellent online tools that can shrink CSS.

It should be noted that shrinking your CSS can provide gains in performance, but you lose some of the readability of your CSS.

15. Make Use of Generic Classes

You'll find that there are certain styles that you're applying over and over. Instead of adding that particular style to each ID, you can create generic classes and add them to the IDs or other CSS classes (using tip #8).

For example, I find myself usingfloat:rightandfloat:left over and over in my designs. So I simply add the classes.leftand.rightto my stylesheet, and reference it in the elements.

.left {float:left}.right {float:right}<div id="coolbox" class="left">...</div>

This way, you don't have to constantly add float:leftto all the elements that need to be floated.

16. Usemargin: 0 autoto Center Layouts

Many beginners to CSS can't figure out why you can't simply usefloat: center to achieve that centered effect on block-level elements. If only it were that easy! Unfortunately, you'll need to use this method to center adiv, paragraphs, or other elements in your layout:

margin: 0 auto; // top, bottom - and left, right values, respectively.

By declaring that both the left and the right margins of an element must be identical, the browsers have no choice but to center the element within its containing element.

17. Don't Just Wrap adivAround It

When starting out, there's a temptation to wrap adivwith an ID or class around an element and create a style for it.

<div class="header-text"><h1>Header Text</h1></div>

Sometimes it might seem easier to just create unique element styles like the above example, but you'll start to clutter your stylesheet. This would have worked just fine:

<h1>Header Text</h1>

Then you can easily add a style to theh1instead of a parentdiv.

18. Use Browser Developer Tools

Modern web browsers come bundled with some vital tools that are must-haves for any web developer. These developer tools are now part of all the major browsers, including Chrome, Firefox, Safari, and Edge. Among the many features that come bundled with the Chrome and Firefox developer tools (like debugging JavaScript, inspecting HTML, and viewing errors), you can also visually inspect, modify, and edit CSS in real time.

19. Hack Less

Avoid using browser-specific hacks if at all possible. There is a tremendous pressure to make sure that designs look consistent across all browsers, but using hacks only makes your designs harder to maintain in the future. Plus, using a reset file (see #4) can eliminate nearly all of the rendering irregularities between browsers.

20. Use Absolute Positioning Sparingly

Absolute positioningis a handy aspect of CSS that allows you to define whereexactlyan element should be positioned on a page to the exact pixel. However, because of absolute positioning's disregard for other elements on the page, the layouts can get quite hairy if there are multiple absolutely positioned elements running around the layout.

21. Use Text-transform

text-transform is a highly useful CSS property that allows you to "standardize" how text is formatted on your site. For example, say you want to create some headers that only have lowercase letters. Just add the text-transformproperty to the header style like so:

text-transform: lowercase;

Now all of the letters in the header will be lowercase by default.text-transformallows you to modify your text (first letter capitalized, all letters capitalized, or all lowercase) with a simple property.

22. Don't Use Negative Margins to Hide Yourh1

Often, people will use an image for their header text and then either use display:noneor a negative margin to float theh1off the page. Matt Cutts, then head of Google's Webspam team, has officially said that this is a bad idea, as Google might think it's spam.

As Cutts explicitly says, avoid hiding your logo's text with CSS. Just use the alt tag. While many claim that you can still use CSS to hide a h1tag as long as theh1is the same as the logo text, I prefer to err on the safe side.

23. Validate Your CSS and XHTML

Validating your CSS and XHTML does more than give a sense of pride: it helps you quickly spot errors in your code. If you're working on a design and for some reason things just aren't looking right, try running themarkupandCSS validator and see what errors pop up. Usually you'll find that you forgot to close a div somewhere or missed a semi-colon in a CSS property.

24. Rems and Ems vs. Pixels

There's always been a strong debate as to whether it's better to use pixels (px) orems andrems when defining font sizes. Pixels are a more static way to define font sizes, and ems are more scalable with different browser sizes and mobile devices. With the advent of many different types of web browsing (laptop, mobile, etc.),ems andrems are increasingly becoming the default for font size measurements as they allow the greatest form of flexibility.

25. Don't Underestimate the List

Lists are a great way to present data in a structured format whos style is easy to modify. Thanks to the display property, you don't have to just use the list as a text attribute. Lists are also great for creating navigation menus and things of the sort.

Many beginners usedivs to make each element in the list because they don't understand how to properly use lists. It's well worth the effort to use brush up on learning list elements to structure data in the future.

26. Avoid Extra Selectors

It's easy to unknowingly add extra selectors to our CSS that clutters the stylesheet. One common example of adding extra selectors is with lists.

body #container .someclass ul li {....}

In this instance, just the.someclass liwould have worked just fine.

.someclass li {...}

Adding extra selectors won't bring Armageddon or anything of the sort, but they do keep your CSS from being as simple and clean as possible.

27. Add Margins and Padding to All Elements

Modern browsers are fairly uniform in the way they render elements, but legacy browsers tend to render elements differently. For example, Internet Explorer renders certain elements differently than Firefox or Chrome, and different versions of Internet Explorer render differently from one another.

One of the main differences between versions of older browsers is how padding and margins are rendered. If you're not already using a reset, you might want to define the margin and padding for all elements on the page, to be on the safe side. You can do this quickly with a global reset, like so:

* {margin:0;padding:0;}

Nowallelements have a padding and margin of 0, unless defined by another style in the stylesheet.

28. Use Multiple Stylesheets

Depending on the complexity of the design and the size of the site, it's sometimes easier to make smaller, multiple stylesheets instead of one giant stylesheet. Aside from being easier for the designer to manage, multiple stylesheets allow you to leave out CSS on certain pages that don't need them.

For example, I might having a polling program that would have a unique set of styles. Instead of including the poll styles to the main stylesheet, I could just create apoll.cssand the stylesheet only to the pages that show the poll.

However, be sure to consider the number of HTTP requests that are being made. Many designers prefer to develop with multiple stylesheets, and then combine them into one file. This reduces the number of HTTP requests to one. Also, the entire file will be cached on the user's computer.

29. Check for Closed Elements First When Debugging

If you're noticing that your design looks a tad wonky, there's a good chance it's because you've left off a closing</div>. You can use theXHTML validatorto help sniff out all sorts of errors like this.

30. Try to Use Flexbox and Grid Layout Instead of Floats

In the past, it was very common and necessary to use floats to create any kind of layout. Unfortunately, floats come with a lot of problems. You can instead start using the much more powerful layout modules called flexbox and grid layout. Flexbox will help you create one-dimensional layouts, and grid will help you with two-dimensional layouts.

• CSS Grid vs. Flexbox: Which Should You Use and When?Anna Monus18 Jul 2021
• How to Build a Full-Screen Responsive Page With FlexboxGeorge Martsoukos20 Nov 2018
• New Course: A Quick Introduction to CSS Grid LayoutAndrew Blackman03 Oct 2018
• CSS Grid Layout: A Quick Start GuideIan Yates15 Mar 2018

31. Use !important Sparingly

The keyword!important is used to bypass any styling rules specified elsewhere for an element. This allows you to use less specific selectors to change the appearance of an element. As a beginner, this might seem like an easy way to style elements without worrying about what selectors you should be using. However, you should avoid that because using !importantwith a lot of elements will ultimately result in!important losing its meaning, as every CSS rule will now bypass the selector specificity.

One possible use for!important is to specify the style of third-party elements added to a webpage where you cannot alter the original stylesheet, its loading order, etc.

You Might Also Enjoy...

• 20+ HTML Forms Best Practices for BeginnersAndrew Burgess31 Dec 2021
• 30+ PHP Best Practices for BeginnersGlen Stansberry31 Dec 2021
• 30 JavaScript Best Practices for BeginnersJeffrey Way27 Jan 2022
• 30 HTML Best Practices for BeginnersJeffrey Way27 May 2021

This post has been updated with contributions fromMonty Shokeen. Monty is a full-stack developer who also loves to write tutorials and to learn about new JavaScript libraries.