# Duplicate Property Detection

Duplicate property detection prevents overrides from happening within the same ruleset. Overrides of this nature are generally more accidental than intensional, for example:

```jsx
<section className="hero">
  background: ivory;
  display: flex;
  background: coral;
</section>
```

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:

![](https://2035066516-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSaW3lW0D0P6RRGeAif%2F-LSa_Sc70KAX92GRTBtO%2F-LSa_TAPdAS5VuJqX9oO%2FDuplicateCSSPropertyTwo.png?generation=1543614359528745\&alt=media)

It should be noted that if a property _partially overrides_ another property in the _same ruleset_ a partial override error is thrown:

```jsx
<h1 className="heading">
  margin: 0px;
  color: dimgray;
  margin-bottom: 10px;
</h1>
```

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:

![](https://2035066516-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSaW3lW0D0P6RRGeAif%2F-LSa_Sc70KAX92GRTBtO%2F-LSa_TAS18jznEx47sqS%2FPartialOverrideFoundTwo.png?generation=1543614359842087\&alt=media)

More information on partial overrides can be [found here](partialoverrides).
