stylelint-declaration-block-no-ignored-properties
v2.8.0
Published
Disallow property values that are ignored due to another property value in the same rule.
Downloads
545,888
Maintainers
Readme
stylelint-declaration-block-no-ignored-properties
Original rule: stylelint/declaration-block-no-ignored-properties.
Disallow property values that are ignored due to another property value in the same rule.
a { display: inline; width: 100px; }
/** ↑
* This property */
Certain property value pairs rule out other property value pairs, causing them to be ignored by the browser. For example, when an element has display: inline, any further declarations about width, height and margin-top properties will be ignored. Sometimes this is confusing: maybe you forgot that your margin-top will have no effect because the element has display: inline, so you spend a while struggling to figure out what you've done wrong. This rule protects against that confusion by ensuring that within a single rule you don't use property values that are ruled out by other property values in that same rule.
The rule complains when it finds:
display: inline
used withwidth
,height
,margin
,margin-top
,margin-bottom
,overflow
(and all variants).display: list-item
used withvertical-align
.display: block
used withvertical-align
.display: flex
used withvertical-align
.display: table
used withvertical-align
.display: table-*
(excepttable-caption
) used withmargin
.display: table-*
(excepttable-cell
) used withpadding
.display: table-*
(excepttable-cell
) used withvertical-align
.display: table-(row|row-group)
used withwidth
,min-width
ormax-width
.display: table-(column|column-group)
used withheight
,min-height
ormax-height
.float: left
andfloat: right
used withvertical-align
.position: static
used withtop
,right
,bottom
,left
orz-index
.position: absolute
used withfloat
,clear
orvertical-align
.position: fixed
used withfloat
,clear
orvertical-align
.list-style-type: none
used withlist-style-image
.overflow: visible
used withresize
.
Installation
npm install stylelint-declaration-block-no-ignored-properties --save-dev
Usage
// .stylelintrc
{
"plugins": [
"stylelint-declaration-block-no-ignored-properties"
],
"rules": {
"plugin/declaration-block-no-ignored-properties": true,
}
}
Options
true
The following patterns are considered violations:
a { display: inline; width: 100px; }
display: inline
causes width
to be ignored.
a { display: inline; height: 100px; }
display: inline
causes height
to be ignored.
a { display: inline; margin: 10px; }
display: inline
causes margin
to be ignored.
a { display: block; vertical-align: baseline; }
display: block
causes vertical-align
to be ignored.
a { display: flex; vertical-align: baseline; }
display: flex
causes vertical-align
to be ignored.
a { position: absolute; vertical-align: baseline; }
position: absolute
causes vertical-align
to be ignored.
a { float: left; vertical-align: baseline; }
float: left
causes vertical-align
to be ignored.
The following patterns are not considered violations:
a { display: inline; margin-left: 10px; }
a { display: inline; margin-right: 10px; }
a { display: inline; padding: 10px; }
a { display: inline-block; width: 100px; }
Although display: inline
causes width
to be ignored, inline-block
works with width
.
a { display: table-cell; vertical-align: baseline; }
Although display: block
causes vertical-align
to be ignored, table-cell
works with vertical-align
.
a { position: relative; vertical-align: baseline; }
Although position: absolute
causes vertical-align
to be ignored, relative
works with vertical-align
.