SonarSource Rules
  • Products

    In-IDE

    Code Quality and Security in your IDE with SonarQube Ide

    IDE extension that lets you fix coding issues before they exist!

    Discover SonarQube for IDE

    SaaS

    Code Quality and Security in the cloud with SonarQube Cloud

    Setup is effortless and analysis is automatic for most languages

    Discover SonarQube Cloud

    Self-Hosted

    Code Quality and Security Self-Hosted with SonarQube Server

    Fast, accurate analysis; enterprise scalability

    Discover SonarQube Server
  • SecretsSecrets
  • ABAPABAP
  • AnsibleAnsible
  • ApexApex
  • AzureResourceManagerAzureResourceManager
  • CC
  • C#C#
  • C++C++
  • CloudFormationCloudFormation
  • COBOLCOBOL
  • CSSCSS
  • DartDart
  • DockerDocker
  • FlexFlex
  • GitHub ActionsGitHub Actions
  • GoGo
  • HTMLHTML
  • JavaJava
  • JavaScriptJavaScript
  • JSONJSON
  • JCLJCL
  • KotlinKotlin
  • KubernetesKubernetes
  • Objective CObjective C
  • PHPPHP
  • PL/IPL/I
  • PL/SQLPL/SQL
  • PythonPython
  • RPGRPG
  • RubyRuby
  • RustRust
  • ScalaScala
  • ShellShell
  • SwiftSwift
  • TerraformTerraform
  • TextText
  • TypeScriptTypeScript
  • T-SQLT-SQL
  • VB.NETVB.NET
  • VB6VB6
  • XMLXML
  • YAMLYAML
CSS

CSS static code analysis

Unique rules to find Bugs and Code Smells in your CSS code

  • All rules 26
  • Bug16
  • Code Smell10
 
Tags
    Impact
      Clean code attribute
        1. Expressions within "calc" should be valid

           Bug
        2. Selectors should be known

           Bug
        3. Single line comment syntax should not be used

           Bug
        4. CSS files should not be empty

           Code Smell
        5. Selectors should not be duplicated

           Code Smell
        6. Selectors of lower specificity should come before overriding selectors of higher specificity

           Code Smell
        7. Multi-line comments should not be empty

           Code Smell
        8. "at-rules" should be valid

           Bug
        9. Media features should be valid

           Bug
        10. Pseudo-element selectors should be valid

           Bug
        11. Pseudo-class selectors should be valid

           Bug
        12. Empty blocks should be removed

           Code Smell
        13. Shorthand properties that override related longhand properties should be avoided

           Bug
        14. Properties should not be duplicated

           Bug
        15. "!important" should not be used on "keyframes"

           Bug
        16. CSS properties should be valid

           Bug
        17. Units should be valid

           Bug
        18. Strings should not contain new lines

           Code Smell
        19. "linear-gradient" directions should be valid

           Bug
        20. "calc" operands should be correctly spaced

           Bug
        21. Font declarations should contain at least one generic font family

           Bug
        22. Duplicated font names should be removed

           Code Smell
        23. Color definitions should be valid

           Bug
        24. Sections of code should not be commented out

           Code Smell
        25. Duplicate imports should be removed

           Code Smell
        26. Extra semicolons should be removed

           Code Smell

        Color definitions should be valid

        intentionality - logical
        reliability
        Bug

          Why is this an issue?

          More Info

          An invalid color definition will by default be interpreted as black, which is likely to have unintended impacts on the expected look and feel of the website.

          This rule raises an issue when a color definition (color, background-color) is not valid. The color definition is considered valid when it is made of hexadecimal characters:

          • longhand: 6 or 8 characters (when alpha is defined)
          • shorthand variant: 3 or 4 characters (when alpha is defined)

          Noncompliant code example

          a {
           color: #3c; /* Noncompliant; shorthand should be made of 3 characters */
          }
          div {
            background-color: #3cb371a; /* Noncompliant; alpha should have 2 characters */
          }
          

          Compliant solution

          a {
           color: #3cc;
          }
          div {
            background-color: #3cb371ac;
          }
          
            Available In:
          • SonarQube IdeCatch issues on the fly,
            in your IDE
          • SonarQube CloudDetect issues in your GitHub, Azure DevOps Services, Bitbucket Cloud, GitLab repositories
          • SonarQube Community BuildAnalyze code in your
            on-premise CI
            Available Since
            9.1
          • SonarQube ServerAnalyze code in your
            on-premise CI
            Developer Edition
            Available Since
            9.1

          © 2008-2025 SonarSource SA. All rights reserved.

          Privacy Policy | Cookie Policy | Terms of Use