1 | # stylelint-declaration-block-no-ignored-properties
|
2 |
|
3 | [![Greenkeeper badge](https://badges.greenkeeper.io/kristerkari/stylelint-declaration-block-no-ignored-properties.svg)](https://greenkeeper.io/)
|
4 |
|
5 | [![NPM version](https://img.shields.io/npm/v/stylelint-declaration-block-no-ignored-properties.svg)](https://www.npmjs.com/package/stylelint-declaration-block-no-ignored-properties)
|
6 | [![Build Status](https://travis-ci.org/kristerkari/stylelint-declaration-block-no-ignored-properties.svg?branch=master)](https://travis-ci.org/kristerkari/stylelint-declaration-block-no-ignored-properties)
|
7 | [![Build status](https://ci.appveyor.com/api/projects/status/yajvta1q8v2jimjp/branch/master?svg=true)](https://ci.appveyor.com/project/kristerkari/stylelint-declaration-block-no-ignored-properties/branch/master)
|
8 | [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
|
9 | [![Downloads per month](https://img.shields.io/npm/dm/stylelint-declaration-block-no-ignored-properties.svg)](http://npmcharts.com/compare/stylelint-declaration-block-no-ignored-properties)
|
10 |
|
11 | Original rule: [stylelint/declaration-block-no-ignored-properties](https://github.com/stylelint/stylelint/tree/7.13.0/lib/rules/declaration-block-no-ignored-properties).
|
12 |
|
13 | Disallow property values that are ignored due to another property value in the same rule.
|
14 |
|
15 | ```css
|
16 | a { display: inline; width: 100px; }
|
17 | /** ↑
|
18 | * This property */
|
19 | ```
|
20 |
|
21 | 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.
|
22 |
|
23 | The rule complains when it finds:
|
24 |
|
25 | - `display: inline` used with `width`, `height`, `margin`, `margin-top`, `margin-bottom`, `overflow` (and all variants).
|
26 | - `display: list-item` used with `vertical-align`.
|
27 | - `display: block` used with `vertical-align`.
|
28 | - `display: flex` used with `vertical-align`.
|
29 | - `display: table` used with `vertical-align`.
|
30 | - `display: table-*` (except `table-caption`) used with `margin`.
|
31 | - `display: table-*` (except `table-cell`) used with `padding`.
|
32 | - `display: table-*` (except `table-cell`) used with `vertical-align`.
|
33 | - `display: table-(row|row-group)` used with `width`, `min-width` or `max-width`.
|
34 | - `display: table-(column|column-group)` used with `height`, `min-height` or `max-height`.
|
35 | - `float: left` and `float: right` used with `vertical-align`.
|
36 | - `position: static` used with `top`, `right`, `bottom`, `left` or `z-index`.
|
37 | - `position: absolute` used with `float`, `clear` or `vertical-align`.
|
38 | - `position: fixed` used with `float`, `clear` or `vertical-align`.
|
39 | - `list-style-type: none` used with `list-style-image`.
|
40 | - `overflow: visible` used with `resize`.
|
41 |
|
42 | ## Installation
|
43 |
|
44 | ```
|
45 | npm install stylelint-declaration-block-no-ignored-properties --save-dev
|
46 | ```
|
47 |
|
48 | ## Usage
|
49 |
|
50 | ```js
|
51 | // .stylelintrc
|
52 | {
|
53 | "plugins": [
|
54 | "stylelint-declaration-block-no-ignored-properties"
|
55 | ],
|
56 | "rules": {
|
57 | "plugin/declaration-block-no-ignored-properties": true,
|
58 | }
|
59 | }
|
60 | ```
|
61 |
|
62 | ## Options
|
63 |
|
64 | ### `true`
|
65 |
|
66 | The following patterns are considered violations:
|
67 |
|
68 | ```css
|
69 | a { display: inline; width: 100px; }
|
70 | ```
|
71 |
|
72 | `display: inline` causes `width` to be ignored.
|
73 |
|
74 | ```css
|
75 | a { display: inline; height: 100px; }
|
76 | ```
|
77 |
|
78 | `display: inline` causes `height` to be ignored.
|
79 |
|
80 | ```css
|
81 | a { display: inline; margin: 10px; }
|
82 | ```
|
83 |
|
84 | `display: inline` causes `margin` to be ignored.
|
85 |
|
86 | ```css
|
87 | a { display: block; vertical-align: baseline; }
|
88 | ```
|
89 |
|
90 | `display: block` causes `vertical-align` to be ignored.
|
91 |
|
92 | ```css
|
93 | a { display: flex; vertical-align: baseline; }
|
94 | ```
|
95 |
|
96 | `display: flex` causes `vertical-align` to be ignored.
|
97 |
|
98 | ```css
|
99 | a { position: absolute; vertical-align: baseline; }
|
100 | ```
|
101 |
|
102 | `position: absolute` causes `vertical-align` to be ignored.
|
103 |
|
104 | ```css
|
105 | a { float: left; vertical-align: baseline; }
|
106 | ```
|
107 |
|
108 | `float: left` causes `vertical-align` to be ignored.
|
109 |
|
110 | The following patterns are *not* considered violations:
|
111 |
|
112 | ```css
|
113 | a { display: inline; margin-left: 10px; }
|
114 | ```
|
115 |
|
116 | ```css
|
117 | a { display: inline; margin-right: 10px; }
|
118 | ```
|
119 |
|
120 | ```css
|
121 | a { display: inline; padding: 10px; }
|
122 | ```
|
123 |
|
124 | ```css
|
125 | a { display: inline-block; width: 100px; }
|
126 | ```
|
127 |
|
128 | Although `display: inline` causes `width` to be ignored, `inline-block` works with `width`.
|
129 |
|
130 | ```css
|
131 | a { display: table-cell; vertical-align: baseline; }
|
132 | ```
|
133 |
|
134 | Although `display: block` causes `vertical-align` to be ignored, `table-cell` works with `vertical-align`.
|
135 |
|
136 | ```css
|
137 | a { position: relative; vertical-align: baseline; }
|
138 | ```
|
139 |
|
140 | Although `position: absolute` causes `vertical-align` to be ignored, `relative` works with `vertical-align`.
|