New Rule: no-important

[aryan02420]

Rule details

Flag the use of !important

What type of rule is this?

Warns about a potential problem

Example code

.really-red {
    color: red !important;
}

Participation

• I am willing to submit a pull request to implement this rule.

Additional comments

Needing !important indicates there may be a larger underlying issue.

[jeddy3]

As with #19, a no-restricted-syntax rule could cover this use case:

{
    "rules": {
        "no-restricted-syntax": [
            "error",
            {
                "selector": "Declaration[important!=true]",
                "message": "!important annotations are not allowed."
            },
        ]
    }
}

When using cascade layers, the !important annotation is useful:

Once we start using cascade layers, we will need to be much more cautious and intentional about how we use !important. It’s no longer a quick way to jump to the top of the priorities — but an integrated part of our cascade layering; a way for lower layers to insist that some of their styles are essential.

Fewer people will likely want to restrict this syntax as they adopt cascade layers.

[nzakas]

Yeah, I think we want to hold off on adding rules that simply disallow syntax because it can easily be covered by no-restricted-syntax, but leaving open for now to see if others feel differently.

[yannbertrand]

I was excited about that one but reading the comments makes me doubt now 😀. I believe @jeddy3's view on these is super interesting, I personally have 0 background on CSS linting so following your advice seems like the best idea to me!

[nzakas]

@jeddy3 is this true for keyframe !important as well? I noticed Stylelint has two different rules for !important:

https://stylelint.io/user-guide/rules/keyframe-declaration-no-important/
https://stylelint.io/user-guide/rules/declaration-no-important/