Skip to content

Commit

Permalink
Merge pull request #220 from 4exova/BEMINFO-40
Browse files Browse the repository at this point in the history
Fix according to BEMINFO-40
  • Loading branch information
tadatuta committed Dec 19, 2014
2 parents 7c56284 + 067dbe2 commit 6a4b188
Show file tree
Hide file tree
Showing 8 changed files with 76 additions and 72 deletions.
50 changes: 25 additions & 25 deletions docs/description/description.en.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
CSSO (CSS Optimizer) is a CSS minimizer unlike others. In addition to usual minification techniques it can perform structural optimization of CSS files, resulting in smaller file size compared to other minifiers.

# 1. Minification
## Minification

Minification is a process of transforming a CSS document into a smaller document without losses. The typical strategies of achieving this are:

* basic transformations, such as removal of unnecessary elements (e.g. trailing semicolons) or transforming the values into more compact representations (e.g. `0px` to `0`);
* structural optimizations, such as removal of overridden properties or merging of blocks.

## 1.1. Basic transformations
### Basic transformations

### 1.1.1. Removal of whitespace
#### Removal of whitespace

In some cases, whitespace characters (` `, `\n`, `\r`, `\t`, `\f`) are unnecessary and do not affect rendering.

Expand All @@ -30,7 +30,7 @@ In some cases, whitespace characters (` `, `\n`, `\r`, `\t`, `\f`) are unnecessa

The following examples are provided with whitespace left intact for better readability.

### 1.1.2. Removal of trailing ';'
#### Removal of trailing ';'

The last semicolon in a block is not required and does not affect rendering.

Expand All @@ -48,7 +48,7 @@ The last semicolon in a block is not required and does not affect rendering.
}
```

### 1.1.3. Removal of comments
#### Removal of comments

Comments do not affect rendering: \[[CSS 2.1 / 4.1.9 Comments](http://www.w3.org/TR/CSS21/syndata.html#comments)\].

Expand Down Expand Up @@ -88,7 +88,7 @@ If you want to save the comment, CSSO can do it with only one first comment in c
}
```

### 1.1.4. Removal of invalid @charset and @import declarations
#### Removal of invalid @charset and @import declarations

According to the specification, `@charset` must be placed at the very beginning of the stylesheet: \[[CSS 2.1 / 4.4 CSS style sheet representation](http://www.w3.org/TR/CSS21/syndata.html#charset)\].

Expand Down Expand Up @@ -121,7 +121,7 @@ Incorrectly placed `@import` rules are deleted according to \[[CSS 2.1 / 6.3 The
}
```

### 1.1.5. Minification of color properties
#### Minification of color properties

Some color values are minimized according to \[[CSS 2.1 / 4.3.6 Colors](http://www.w3.org/TR/CSS21/syndata.html#color-units)\].

Expand All @@ -147,7 +147,7 @@ Some color values are minimized according to \[[CSS 2.1 / 4.3.6 Colors](http://w
}
```

### 1.1.6. Minification of 0
#### Minification of 0

In some cases, the numeric values can be compacted to `0` or even dropped.

Expand All @@ -167,7 +167,7 @@ The `0%` value is not being compacted to avoid the following situation: `rgb(100
}
```

### 1.1.7. Minification of multi-line strings
#### Minification of multi-line strings

Multi-line strings are minified according to \[[CSS 2.1 / 4.3.7 Strings](http://www.w3.org/TR/CSS21/syndata.html#strings)\].

Expand All @@ -187,7 +187,7 @@ Multi-line strings are minified according to \[[CSS 2.1 / 4.3.7 Strings](http://
}
```

### 1.1.8. Minification of the font-weight property
#### Minification of the font-weight property

The `bold` and `normal` values of the `font-weight` property are minimized according to \[[CSS 2.1 / 15.6 Font boldness: the 'font-weight' property](http://www.w3.org/TR/CSS21/fonts.html#font-boldness)\].

Expand All @@ -213,9 +213,9 @@ The `bold` and `normal` values of the `font-weight` property are minimized accor
}
```

## 1.2. Structural optimizations
### Structural optimizations

### 1.2.1. Merging blocks with identical selectors
#### Merging blocks with identical selectors

Adjacent blocks with identical selectors are merged.

Expand Down Expand Up @@ -254,7 +254,7 @@ Adjacent blocks with identical selectors are merged.
}
```

### 1.2.2. Merging blocks with identical properties
#### Merging blocks with identical properties

Adjacent blocks with identical properties are merged.

Expand Down Expand Up @@ -292,7 +292,7 @@ Adjacent blocks with identical properties are merged.
}
```

### 1.2.3. Removal of overridden properties
#### Removal of overridden properties

Properties ignored by the browser can be removed using the following rules:

Expand All @@ -318,7 +318,7 @@ Properties ignored by the browser can be removed using the following rules:
}
```

#### 1.2.3.1. Removal of overridden shorthand properties
##### Removal of overridden shorthand properties

In case of `border`, `margin`, `padding`, `font` and `list-style` properties, the following removal rule will be applied: if the last property is a 'general' one (for example, `border`), then all preceding overridden properties will be removed (for example, `border-top-width` or `border-style`).

Expand All @@ -337,7 +337,7 @@ In case of `border`, `margin`, `padding`, `font` and `list-style` properties, th
}
```

### 1.2.4. Removal of repeating selectors
#### Removal of repeating selectors

Repeating selectors can be removed.

Expand All @@ -355,7 +355,7 @@ Repeating selectors can be removed.
}
```

### 1.2.5. Partial merging of blocks
#### Partial merging of blocks

Given two adjacent blocks where one of the blocks is a subset of the other one, the following optimization is possible:

Expand Down Expand Up @@ -425,7 +425,7 @@ Minification won't take place if character count of the properties to be copied
}
```

### 1.2.6. Partial splitting of blocks
#### Partial splitting of blocks

If two adjacent blocks contain intersecting properties the following minification is possible:

Expand Down Expand Up @@ -497,7 +497,7 @@ Minification won't take place if there's no gain in character count.
}
```

### 1.2.7. Removal of empty ruleset and at-rule
#### Removal of empty ruleset and at-rule

Empty ruleset and at-rule will be removed.

Expand Down Expand Up @@ -525,7 +525,7 @@ Empty ruleset and at-rule will be removed.
.test{color:red;border:none}
```

### 1.2.8. Minification of margin and padding properties
#### Minification of margin and padding properties

The `margin` and `padding` properties are minimized according to \[[CSS 2.1 / 8.3 Margin properties](http://www.w3.org/TR/CSS21/box.html#margin-properties)\] and \[[CSS 2.1 / 8.4 Padding properties](http://www.w3.org/TR/CSS21/box.html#padding-properties)\].

Expand Down Expand Up @@ -578,21 +578,21 @@ The `margin` and `padding` properties are minimized according to \[[CSS 2.1 / 8.
}
```

# 2. Recommendations
## Recommendations

Some stylesheets compress better than the others. Sometimes, one character difference can turn a well-compressible stylesheet to a very inconvenient one.

You can help the minimizer by following these recommendations.

## 2.1. Length of selectors
### Length of selectors

Shorter selectors are easier to re-group.

## 2.2. Order of properties
### Order of properties

Stick to the same order of properties throughout the stylesheet - it will allow you to not use the guards. The less manual intervention there is, the easier it is for the minimizer to work optimally.

## 2.3. Positioning of similar blocks
### Positioning of similar blocks

Keep blocks with similar sets of properties close to each other.

Expand Down Expand Up @@ -640,7 +640,7 @@ Good:
.test1{color:green}.test0,.test2{color:red}
```

## 2.4. Using !important
### Using !important

It should go without saying that using the `!important` declaration harms minification performance.

Expand Down
Loading

0 comments on commit 6a4b188

Please sign in to comment.