Duplicate property detection prevents overrides from happening within the same ruleset. Overrides of this nature are generally more accidental than intensional, for example:
1
<sectionclassName="hero">
2
background: ivory;
3
display: flex;
4
background: coral;
5
</section>
Copied!
In the example above the background property has been defined twice within the same ruleset. A compile time error catches the duplicate property and throws the following:
It should be noted that if a property partially overrides another property in the same ruleset a partial override error is thrown:
1
<h1className="heading">
2
margin:0px;
3
color: dimgray;
4
margin-bottom:10px;
5
</h1>
Copied!
In the example above both margin and margin-bottom have been used. Since the longhand property margin-bottom overrides the shorthand property margin a partial override error is thrown:
More information on partial overrides can be found here.