21 Tips & Tricks To Nailing Modern CSS

Posted on - Last Modified on

When designing a website, it is advisable to follow a set of best practices and useful conventions that are recommended by the CSS community. As a front-end web developer, you have probably faced a few coding challenges that you later realized could be solved by a simple, modern CSS. That is why using these simple tips and tricks will save you a lot of time and worry as you create your amazing site.

Modern CSS Tips and Tricks

This article will highlight 21 tips that you may or may not have heard about. Some focus more on beginners, while the rest are a little more advanced. All in all, we are sure everyone will be able to find a useful trick that will make the website development process easier:

1. Do a reset

One of the major hurdles you have to get through is the fact that different browsers behave in very different ways. The situation has improved a lot over the years, but significant problems still exist.

The best way to handle this is by applying a CSS reset. This process sets a universal default value for all of the elements you are working with. In turn, you will be able to start working on a blank style sheet that will produce the same results in every browser.

You can use various libraries to do this, including minireset, normalize.css, and ress. These will be able to correct every imaginable inconsistency on any browser. Alternatively, you could do a basic CSS reset yourself using a number of styles.

2. Create layouts using Flexbox

Inline blocks and floats work well, but they are more suited as tools for styling documents. That is why models such as Flexbox exist. It is specifically designed to create any layout easily and exactly as envisioned.

The Flexbox model also comes with a range of properties that give developers a lot of flexibility. Once you get used to it, Flexbox makes creating responsive layouts a very easy and straightforward process.

3. Look out for margin collapse

Unlike other properties, vertical margins are prone to collapsing when they meet. This means that when the bottom margin of one element meets the top of another, only the bigger margin survives.

There are various ways to work around this, but the best course of action is to use elements that go in only one direction.

4. Use the border box

The box sizing property is very important but not very well known, especially to beginners. To understand it, you have to look at what it actually does:

  • Default content-box: When setting the width/height of an element, it simply defines the size of its content.

  • Border-box: The numbers defined here include the border and padding into the width/height value.

Setting a border box on all your elements makes it easier for you to style your site.

5. Using images as backgrounds

When doing a responsive design, consider adding images to your design by using a <div> tag on the background CSS property. Not only is this easier than using the <img> elements, but it also helps you style images to keep their original aspect and size.

6. Use better table borders

Creating tables in HTML is never an easy task. This is because they are difficult to style and almost impossible to make responsive. You will most likely end up with a lot of repeating borders if you do not know the best way to resolve this issue. However, you can add a simple hack-free CSS to the table to fix this problem:

border-collapse:collapse;

If you are having trouble with HTML text, you can find expert help from freelancers at Freelancer.com.

7. Put in better comments

While CSS is not a programming language, it still uses code that must be documented. The easiest way to organize your style sheets and make them more accessible is by using simple comments.

You can also use a stylized comment for larger components of the CSS. However, remember to leave a few lines after that. Lesser design details and components are marked using a single-line comment.

8. Use the hyphens

CSS is not sensitive to case, so use another way to separate words. In this case, you can use the hyphen to write names or IDs that have more than one word.

9. Avoid repetition

Many CSS properties inherit their value from elements that are one level higher in the DOM tree, resulting in cascading style sheets. This means you do not have to set up a particular property separately for each element on the page. Instead, you can simply add the most prevalent style and let it trickle down to the rest of the connected elements.

10. Create animations with transform

You do not have to animate each element by changing their width/height or other properties. Instead, you can use the transform property which makes for smoother transitions throughout the site.

If you are not very conversant with this, you can outsource the job to experts.

11. Use the library

DIY has become more and more popular, but should always be the last resort while using CSS. The CSS community constantly puts out new libraries, most of which are open source and serve a wide variety of purposes. Resources like CodePen and GitHub should always be your first stop when faced with a CSS problem.

12. Lower selector specificity

Beginners to CSS usually assume that selectors will overwrite everything above them. However, it does not always work like this. Make sure to use selectors with a higher specificity, which will always trump older ones.

13. Avoid !important

This is a quick fix that will cause you a lot of headaches and rewrites in the future. Instead, try to figure out why your selector is not working, and fix it.

14. Meaning and style

Writing upper case letters in HTML lets you use them for their standard meaning. If you want to write some of your text in caps for stylistic reasons, write it out in HTML then transform it in CSS.

15. Em, Rem, and Px

The debate is raging on whether it is best to set the size of elements using either em, rem, or px values. However, each option has its own tips for use: Em is usually used in media queries and is a great option for responsive sites; Rem makes the process of scaling paragraphs and headings much easier; and Pixels are easy to understand, reliable, and offer the most precision.

16. Larger projects need a preprocessor

Many people see preprocessors as the next step in the development of CSS. They include tools like Stylus, Sass, PostCSS, and Less, among others. Preprocessors make CSS codes easier to manage in large projects by providing a wide range of features such as CSS functions, variables, and selector nesting.

17. Number headings and subheadings

A lot of novices number their headings and subheadings either through a script or even manually. However, you can easily use the CSS counter to do this in a way that is supported by all the available browsers.

18. Use auto-prefixers to ensure better compatibility

One of the most frustrating things about CSS is the need to write specific prefixes for different browsers. These prefixes are rarely consistent, difficult to understand, and adding them to a style sheet is an extremely boring process.

However, there are auto-prefixer tools that are now available to make the process easier. These tools add the desired prefixes automatically and even let you choose which browsers to support.

19. Use of minified code

You should always use minified code and other resources in the production process. Not only does this improve your site or app's page load, but it removes repetition to reduce the total file size. Be careful, though; the process also makes style sheets unreadable, so it is a good idea to keep an updated backup on hand.

20. Use Caniuse

Different browsers still have a lot of inconsistencies in compatibility. To solve this, you can use services like Caniuse to check if your browser is widely supported, or needs prefixes and debugging on certain platforms.

However, just checking Caniuse is not adequate. You will also have to do various tests as layouts sometimes break down for no clear reason.

21. Make sure to validate

While this may not be as critical in CSS as it is in HTML, running through your final code is still an important process. Validation could help you identify any mistakes and bad practices, or simply help you improve the code.

It could take you a while to get used to CSS, but it will eventually make your work much easier. Have you used any of these tips before? Are there any other nifty CSS tricks you know that should be on this list? Please share your thoughts and comments below!

 

 

Posted 31 August, 2017

LucyKarinsky

Software Developer

Lucy is the Development & Programming Correspondent for Freelancer.com. She is currently based in Sydney.

Next Article

11 Tips To Become A Better Node Developer In 2017