Resilient Error Handling in CSS

CSS, unlike JavaScript, handles errors in a resilient manner. Instead of terminating all script execution upon encountering an error, it continues to function and tries its best to fulfill your desired styling.

When CSS encounters an error, it simply skips that line and moves on to the next line without throwing an error. For example, if you forget to include a semicolon on a line, like in the following code snippet:

p {
    font-size: 20px
    color: black;
    border: 1px solid black;
}

The line with the error and the subsequent line will not be applied, but the third rule will still be successfully applied to the page. CSS scans the code until it encounters a semicolon, so it skips the invalid rule that should have been “font-size: 20px; color: black;”, but is now “font-size: 20px color: black;”. This behavior allows CSS to gracefully handle errors while still applying valid styles.

Often, it can be difficult to identify the presence and location of errors since browsers don’t explicitly notify us. Thankfully, there are tools available like CSS Lint to assist in error detection and prevention.