Category: CSS Page 2 of 10

Your CSS isn’t working right. Sometimes your styles don’t do what you expect them to do. What can you do to find the problem and fix it? Debugging CSS can be challenging.

Photo by Yan Krukov from Pexels

Check for syntax errors

Typos and other mistakes can creep into your CSS. Read it from the bottom to the top. When you read it backwards, you may spot errors.

If you don’t see anything wrong, try using the W3C CSS Validator. It may find something that you missed.

Use the Browser DevTools

Most browsers include developer tools. Use these to help diagnose the problem. You can change, update or comment out code. On MDN Web Docs, you can learn more about FireFox’s Developer Tools. If you prefer Chrome, check out Chrome DevTools.

Does your browser support it?

If the browser you are using doesn’t support the CSS property and value you are using, it will ignore it. You can use Can I use to learn if your browser supports this feature.

Comment out or disable the code

When you comment out the code, you can test and figure out where conflicts are occurring. If that doesn’t work, use DevTools to see if one rule is overriding the one you are working on.

Use borders

Add a border to styles that are causing you trouble. The border can help you to see the relationships between elements.

Double check you are editing the right file

Are you sure that you were editing the right file? Did you copy it from your local development machine to the production server? When you are writing code, it can be easy to have many files open at once. Double check to be sure you edited the right one.

Take a break

Sometimes you need to take a break. Go for a walk, talk to a friend, get some water. Time away from a problem can help you figure it out.

Debugging CSS still not working?

Explain the problem to a coworker or a pet. Sometime talking to someone else about the problem helps you figure out what to do next.

What are CSS Variables?

Most programming languages allow you to use variables. Variables are used to store information and manipulated by the program. In CSS, you previously need a preprocessor like SASS or LESS to use variables. CSS Variables are custom properties that you define with specific values and reuse throughout your CSS document.

Photo by Pexels from Pixabay

In CSS as well as programming languages, you can declare your variables either globally or locally. A global variable is a custom property that is available to your entire HTML document. To declare a global custom property, you use the :root pseudo-class.

For example, you want to define your theme colors. You can use the :root pseudo-class to do that.

:root {
    --main-color: blue;
    --main-text-color: aqua;
}

You can also declare a variable locally. By declaring a custom property locally, you limit the scope or impact that the variable can have.

.primary-background-color {
    --background-color: teal;
}

When you create a CSS Variable, you can overwrite the value. By taking advantage of cascade, you can create a new style that changes the default value of a global declare variable.

.text-color {
    --main-text-color: orange;
}

Var()

Preprocessors allow you to use a variable by referencing its name. You use the Var() function when inserting the value of a custom property.

.featured-content-box {
    background-color: var(--main-color)
}

Calc()

Sometimes you need to do a little math to get your styles to work they way you want them to. Calc() is a native CSS way to do simple math calculations. With it, you can do addition, subtraction, multiplication and division. CSS Tricks talks about use cases for Calc().

For example, you may want to change the width of a style.

.box {
    width: calc(100% - 80px);
}

Why use?

CSS Variables can be overwritten, cascade down and used in JavaScript. If you don’t want to use a preprocessor like SASS or LESS, you can use custom variables to make managing your styles a lot simpler.

In Web Dev Simplified’s CSS Variables Tutorial, he gives you a quick introduction on how to use them. You learn what they are, how to write them and use them with JavaScript.

Summary

At first, CSS Variables sounds complicated. They can help you to make your CSS easier to maintain. Variables are a lot easier to use than hex or hsl codes.