CSS (Cascading Style Sheets) are the style sheets that provide formatting and style to your HTML, making them integral to the structure of your web pages. But CSS can be tricky at times, so it helps to know some tips and tricks to make your pages load faster and save space. With that in mind, here are 10 CSS pro tips you should know about!
1) Use IDs with care
While ID selectors are a great way to style individual elements, they can sometimes cause unintended consequences. For example, if an ID selector is used on an element whose content may change, there’s no guarantee that each of those changes will be reflected in your HTML. When you know exactly what you want and how you want it to look, IDs can be very effective.
2) Do not use important
In a perfect world, every website would be made with only semantically correct HTML. However, we don’t live in a perfect world, and sometimes we just need to get things done quickly. That is why! important is your friend! If you use it appropriately, it can save you time and ensure that your design elements render as intended.
So when should you use ! important? It depends on what browser prefixes are available for that property in question.
3) Choose a limited number of fonts
Using many fonts in a design can be distracting. Choose 2-3 typefaces, and stick with them throughout your site. It will unify your site and make it easier for visitors to read. Selecting a limited number of fonts also makes it easier for others to select those fonts for their own projects if you choose not to include any font files with your code.
4) Use only defined units for layout
Avoid using ems or percentages for your font sizes, margins, padding, and borders. You’ll avoid a lot of headaches that way. Instead, define specific units for everything.
5) Be consistent in naming and indentation
If your HTML and CSS use tabs for indentation, you’ll have a much easier time managing large projects in the future. Also, make sure that you choose only one type of naming convention for your IDs, classes, and attributes (e.g., user-info or userInfo). If you mix it up from page to page, it will be difficult for other people who have to edit your code later on (for example if they need to update a style).
6) Understand when to use which selectors
When it comes to styling elements on a web page, there are four different types of selectors that you can use in your stylesheet. Depending on what you’re trying to achieve with your designs, some will work better than others. Understanding when and where each type of selector should be used can save you time and energy in creating more effective stylesheets.
7) Take advantage of shortcuts
If you’re new to CSS, learning how to write code from scratch can be an arduous process. Thankfully, many of today’s most popular coding tools and frameworks come with shortcuts for common design tasks—saving us valuable time in every step of our workflow. In some cases, these tricks can even make it seem like we’re using entirely different languages than what we’ve been using all along!
8) Set your priorities straight
We all want to build our websites and applications fast, but sometimes you need to take a step back and really think about what it is you’re building. It’s important that your codebase is easy for other developers on your team or even other people in your company (and potential future employers) to maintain. Here are some CSS tricks you can use that will help with that.
9) Know how browsers parse stylesheets
It’s important to understand how browsers read stylesheets in order to prevent common mistakes and ensure you aren’t unknowingly applying an extra layer of styling. For example, if a parent element of a div has position: relative; applied, that div won’t appear on screen until its parent is scrolled into view. In order for your page elements to display correctly, you need to understand how browsers parse stylesheets.
10) Know how browser caching works
One of my biggest pet peeves is poorly designed web apps. And one of my biggest reasons for poorly designed web apps is slow loading times. When a page loads slowly, it creates a frustrating experience for users and can cause them to bounce from your site and never come back. But there’s an easy fix.
