Many front-end developers know that valid HTML has a positive effect on SEO. But does a valid CSS affect SEO?
On the Google website on the page https://support.google.com/webmasters/answer/100782?hl=en it says: "Clean, valid HTML is a good insurance policy, and using CSS separates presentation from content, and can help pages render and load faster. Validation tools, such as the free online HTML and CSS validators provided by the W3 Consortium, are useful for checking your site, and tools such as HTML Tidy can help you quickly and easily clean up your code."
But if you look at the world’s most popular front-end component library, for example, you can see that even it contains a lot of errors and warnings from the W3C validator.
:root{
--blue:#007bff;
--indigo:#6610f2;
--purple:#6f42c1;
--pink:#e83e8c;
--red:#dc3545;
--orange:#fd7e14;
--yellow:#ffc107;
--green:#28a745;
--teal:#20c997;
--cyan:#17a2b8;
--white:#fff;
--gray:#6c757d;
--gray-dark:#343a40;
--primary:#007bff;
--secondary:#6c757d;
--success:#28a745;
--info:#17a2b8;
--warning:#ffc107;
--danger:#dc3545;
--light:#f8f9fa;
--dark:#343a40;
--breakpoint-xs:0;
--breakpoint-sm:576px;
--breakpoint-md:768px;
--breakpoint-lg:992px;
--breakpoint-xl:1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
} ... <= This is just a small part of the file bootstrap.min.css.
The validator https://jigsaw.w3.org/css-validator/ says there are 30 errors and 670 warnings in the Bootstrap. But this CSS is used on many successful sites. Would they be even more successful in SEO if they used a valid CSS?
In their general guidelines for browser compatibility, Google mention the W3C validation tools for writing good, clean code.
They also state the following:
Although we do recommend using valid HTML, it's not likely to be a factor in how Google crawls and indexes your site.
So we can assume this also is the case for CSS.
Keep in mind that there are a lot of other things in your CSS that will affect the search ranking, like mobile-friendly styles, and factors that causes slower loading times like selector specificity, file size, imports etc.