Css макет — float и clear

Compatibility modes

There is a certain number of compatibility mode shortcuts, namely:


  • (default) — Internet Explorer 10+ compatibility mode
  • — Internet Explorer 9+ compatibility mode
  • — Internet Explorer 8+ compatibility mode
  • — Internet Explorer 7+ compatibility mode
newCleanCSS({  compatibility{    colors{      opacitytrue},    properties{      backgroundClipMergingtrue,      backgroundOriginMergingtrue,      backgroundSizeMergingtrue,      colorstrue,      ieBangHackfalse,      ieFiltersfalse,      iePrefixHackfalse,      ieSuffixHackfalse,      mergingtrue,      shorterLengthUnitsfalse,      spaceAfterClosingBracetrue,      urlQuotesfalse,      zeroUnitstrue},    selectors{      adjacentSpacefalse,      ie7Hacktrue,      mergeablePseudoClasses':active',...,      mergeablePseudoElements'::after',...},    units{      chtrue,      intrue,      pctrue,      pttrue,      remtrue,      vhtrue,      vmtrue,      vmaxtrue,      vmintrue}}})

You can also use a string when setting a compatibility mode, e.g.

newCleanCSS({  compatibility'ie9,-properties.merging'})

How to apply arbitrary transformations to CSS properties?

If clean-css doesn’t perform a particular property optimization, you can use callback to apply it:

var source ='.block{background-image:url(/path/to/image.png)}';var output =newCleanCSS({  level{1{transformfunction(propertyName,propertyValue,selector){if(propertyName =='background-image'&&propertyValue.indexOf('/path/to')>-1){returnpropertyValue.replace('/path/to','../valid/path/to');}}}}}).minify(source);console.log(output.styles); # =>.block{background-imageurl(..validpathtoimage.png)}

Note: returning from callback will drop a property.

How to apply arbitrary transformations to CSS properties?

If clean-css doesn’t perform a particular property optimization, you can use callback to apply it:

var source ='.block{background-image:url(/path/to/image.png)}';var output =newCleanCSS({  level{1{transformfunction(propertyName,propertyValue,selector){if(propertyName =='background-image'&&propertyValue.indexOf('/path/to')>-1){returnpropertyValue.replace('/path/to','../valid/path/to');}}}}}).minify(source);console.log(output.styles); # =>.block{background-imageurl(..validpathtoimage.png)}

Note: returning from callback will drop a property.

Optimization levels

The option can be either , (default), or , e.g.

newCleanCSS({  level2})

or a fine-grained configuration given via a hash.

Please note that level 1 optimization options are generally safe while level 2 optimizations should be safe for most users.

Level 0 optimizations simply means «no optimizations». Use it when you’d like to inline imports and / or rebase URLs but skip everything else.

Level 1 optimizations (default) operate on single properties only, e.g. can remove units when not required, turn rgb colors to a shorter hex representation, remove comments, etc

Here is a full list of available options:

newCleanCSS({  level{1{      cleanupCharsetstrue,      normalizeUrlstrue,      optimizeBackgroundtrue,      optimizeBorderRadiustrue,      optimizeFiltertrue,      optimizeFonttrue,      optimizeFontWeighttrue,      optimizeOutlinetrue,      removeEmptytrue,      removeNegativePaddingstrue,      removeQuotestrue,      removeWhitespacetrue,      replaceMultipleZerostrue,      replaceTimeUnitstrue,      replaceZeroUnitstrue,      roundingPrecisionfalse,      selectorsSortingMethod'standard',      specialComments'all',      tidyAtRulestrue,      tidyBlockScopestrue,      tidySelectorstrue,transformfunction(){}}}});

There is an shortcut for toggling all options at the same time, e.g.

newCleanCSS({  level{1{      allfalse,      tidySelectorstrue}}});

Level 2 optimizations operate at rules or multiple properties level, e.g. can remove duplicate rules, remove properties redefined further down a stylesheet, or restructure rules by moving them around.

Please note that if level 2 optimizations are turned on then, unless explicitely disabled, level 1 optimizations are applied as well.

Here is a full list of available options:

newCleanCSS({  level{2{      mergeAdjacentRulestrue,      mergeIntoShorthandstrue,      mergeMediatrue,      mergeNonAdjacentRulestrue,      mergeSemanticallyfalse,      overridePropertiestrue,      removeEmptytrue,      reduceNonAdjacentRulestrue,      removeDuplicateFontRulestrue,      removeDuplicateMediaBlockstrue,      removeDuplicateRulestrue,      removeUnusedAtRulesfalse,      restructureRulesfalse,      skipProperties}}});

There is an shortcut for toggling all options at the same time, e.g.

newCleanCSS({  level{2{      allfalse,      removeDuplicateRulestrue}}});

Usage

  • became — make sure to reverse the value;
  • became — make sure to reverse the value;
  • became — make sure to reverse the value;
  • no longer possible to use as a function as is always required;
  • method returns a hash instead of a string now, so use instead of . This change is due to addition of source-maps.
  • , , and are now a properties of a hash returned by method (see above) instead of CleanCSS instance.

Clean-css accepts the following command line arguments (please make sure you use as the very last argument to avoid potential issues):

To minify a public.css file into public-min.css do:

To minify the same public.css into the standard output skip the parameter:

More likely you would like to concatenate a couple of files. If you are on a Unix-like system:

cat one.css two.css three.css | cleancss -o merged-and-minified.css

On Windows:

type one.css two.css three.css | cleancss -o merged-and-minified.css

Or even gzip the result at once:

cat one.css two.css three.css | cleancss | gzip -9 -c > merged-minified-and-gzipped.css.gz
var CleanCSS =require('clean-css');var source ='a{font-weight:bold;}';var minified =newCleanCSS().minify(source).styles;

CleanCSS constructor accepts a hash as a parameter, i.e., with the following options available:

  • — set to false to disable advanced optimizations — selector & property merging, reduction, etc.
  • — set to false to disable aggressive merging of properties.
  • — turns on benchmarking mode measuring time spent on cleaning up (run to see example)
  • — set to true to get minification statistics under property (see for examples)
  • — a hash of options for inliner, see test/protocol-imports-test.js for examples
  • — whether to keep line breaks (default is false)
  • — for keeping all (default), for keeping first one only, for removing all
  • — whether to merge blocks (default is true)
  • — whether to process rules
  • — set to false to skip URL rebasing
  • — path to resolve relative rules and URLs
  • — set to false to disable restructuring in advanced optimizations
  • — path to resolve absolute rules and rebase relative URLs
  • — rounding precision; defaults to ; disables rounding
  • — set to true to enable semantic merging mode which assumes BEM-like content (default is false as it’s highly likely this will break your stylesheets — use with caution!)
  • — set to false to skip shorthand compacting (default is true unless sourceMap is set when it’s false)
  • — exposes source map under property, e.g. (default is false) If input styles are a product of CSS preprocessor (LESS, SASS) an input source map can be passed as a string.
  • — set to true to inline sources inside a source map’s field (defaults to false) It is also required to process inlined sources from input source maps.
  • — path to a folder or an output file to which rebase all URLs

The output of method (or the 2nd argument to passed callback) is a hash containing the following fields:

  • — optimized output CSS as a string
  • — output source map (if requested with option)
  • — a list of errors raised
  • — a list of warnings raised
  • — a hash of statistic information (if requested with option):
    • — original content size (after import inlining)
    • — optimized content size
    • — time spent on optimizations
    • — a ratio of output size to input size (e.g. 25% if content was reduced from 100 bytes to 75 bytes)

In order to inline remote statements you need to provide a callback to minify method, e.g.:

var CleanCSS =require('clean-css');var source ='@import url(http://path/to/remote/styles);';newCleanCSS().minify(source,function(errors,minified){});

This is due to a fact, that, while local files can be read synchronously, remote resources can only be processed asynchronously. If you don’t provide a callback, then remote s will be left intact.


First clone the source, then run:

  • to create the browser-ready clean-css version
  • for the test suite

How to work with source maps?

To generate a source map, use option, e.g.:

newCleanCSS({ sourceMaptrue, rebaseTo pathToOutputDirectory }).minify(source,function(error,output){});

You can also pass an input source map directly as a 2nd argument to method:

newCleanCSS({ sourceMaptrue, rebaseTo pathToOutputDirectory }).minify(source, inputSourceMap,function(error,output){});

or even multiple input source maps at once:

newCleanCSS({ sourceMaptrue, rebaseTo pathToOutputDirectory }).minify({'path/to/source/1'{    styles'...styles...',    sourceMap'...source-map...'},'path/to/source/2'{    styles'...styles...',    sourceMap'...source-map...'}},function(error,output){});

Двухколоночный макет

Двухколоночный макет наиболее популярен в веб-дизайне за счёт своей универсальности и простоты. Как правило, в широкой колонке располагается основное содержимое, а в узкой, называемой ещё сайдбар (от англ. sidebar, боковая панель), навигация, реклама и др. Рассмотрим несколько типовых макетов, в которых колонки различаются шириной и расположением.

1. Ширина всех колонок задана в процентах

Если ширина каждой колонки известна, то нам достаточно указать её через width и добавить свойство float со значением left (пример 4). Естественно, общая ширина колонок не должна превышать 100%.

Пример 4. Двухколоночный макет

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Двухколоночный макет</title> <style> .row { overflow: hidden; /* Отменяем обтекание */ } .sidebar, .content { float: left; /* Формируем колонки */ box-sizing: border-box; /* padding не влияет на ширину */ padding: 10px; /* Поля вокруг текста */ min-height: 100px; /* Минимальная высота */ } .sidebar { width: 20%; /* Ширина колонки */ background: #ffead0; /* Цвет фона */ } .content { width: 80%; /* Ширина колонки */ background: #c8eaf5; /* Цвет фона */ } </style> </head> <body> <div class=»row»> <section class=»sidebar»>Боковая панель</section> <section class=»content»>Содержимое</section> </div> </body> </html>

float позволяет менять порядок элементов <section> к коде, тем самым меняя и расположение колонок. Если sidebar и content переставить местами, то колонка с содержимым окажется уже слева.

Класс row введён для универсальности и отменяет действие float ниже колонок, к примеру, для корректного добавления подвала.

2. Ширина левой колонки задана, правая занимает оставшееся пространство

Для макета, где ширина левой колонки задана в пикселях, свойства float и width применяются только к левой колонке. При этом край правой колонки смещается с помощью свойства margin-left на ширину левой колонки или превышает её (пример 5).

Пример 5. Использование margin-left

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Двухколоночный макет</title> <style> .sidebar, .content, footer { box-sizing: border-box; /* padding не влияет на ширину */ padding: 10px; /* Поля вокруг текста */ } .row { overflow: hidden; /* Отменяем обтекание */ } .sidebar, .content { min-height: 100px; } .sidebar { float: left; /* Формируем колонки */ width: 200px; /* Ширина колонки */ background: #ffead0; /* Цвет фона */ } .content { margin-left: 210px; /* Отступ слева */ background: #c8eaf5; /* Цвет фона */ } footer { background: #e2edc1; /* Цвет фона */ margin-top: 10px; /* Отступ сверху */ } </style> </head> <body> <div class=»row»> <section class=»sidebar»>Боковая панель</section> <section class=»content»>Содержимое</section> </div> <footer>Подвал</footer> </body> </html>

В данном примере левая колонка остаётся фиксированного размера, а правая занимает всё остальное доступное пространство (рис. 4).

Рис. 4. Двухколоночный макет

3. Ширина правой колонки задана, левая занимает оставшееся пространство

Код похож на предыдущий пример, HTML остаётся прежним, а в стилях меняем значение float на right и ставим margin-right вместо margin-left (пример 6).

Пример 6. Использование margin-right

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Двухколоночный макет</title> <style> .sidebar, .content { box-sizing: border-box; padding: 10px; min-height: 100px; } .row { overflow: hidden; } .sidebar { float: right; width: 200px; background: #ffead0; } .content { margin-right: 210px; background: #c8eaf5; } </style> </head> <body> <div class=»row»> <section class=»sidebar»>Боковая панель</section> <section class=»content»>Содержимое</section> </div> </body> </html>

Formatting options

By default output CSS is formatted without any whitespace unless a option is given. First of all there are two shorthands:

newCleanCSS({  format'beautify'})

and

newCleanCSS({  format'keep-breaks'})

however option also accept a fine-grained set of options:

newCleanCSS({  format{    breaks{      afterAtRulefalse,      afterBlockBeginsfalse,      afterBlockEndsfalse,      afterCommentfalse,      afterPropertyfalse,      afterRuleBeginsfalse,      afterRuleEndsfalse,      beforeBlockEndsfalse,      betweenSelectorsfalse},    breakWith'\n',    indentBy,    indentWith'space',    spaces{      aroundSelectorRelationfalse,      beforeBlockBeginsfalse,      beforeValuefalse},    wrapAtfalse}})

What’s new in version 4.1

clean-css 4.1 introduces the following changes / features:

  • as an alias to ;
  • compatibility flag controlling merging of rules with multiple pseudo classes / elements;
  • flag in level 1 optimizations controlling removal of rules and nested blocks;
  • flag in level 2 optimizations controlling removal of rules and nested blocks;
  • flag in compatibility settings controlling maximum number of selectors in a single rule;
  • method improved signature accepting a list of hashes for a predictable traversal;
  • level 1 optimization allows or for disabling selector sorting;
  • option controlling a function for handling remote requests;
  • new shorthand and longhand optimizers;
  • removal of flag in level 1 optimizations due to new shorthand optimizer;
  • flag in level 2 optimizations controlling which properties won’t be optimized;
  • new shorthand and longhand optimizers;
  • level 2 optimization controlling removal of unused , , , and at rules;

Choose the Right Synonym for clear

Adjective

clear, transparent, translucent, limpid mean capable of being seen through. clear implies absence of cloudiness, haziness, or muddiness. clear water transparent implies being so clear that objects can be seen distinctly. a transparent sheet of film translucent implies the passage of light but not a clear view of what lies beyond. translucent frosted glass limpid suggests the soft clearness of pure water. her eyes were limpid pools of blue

clear, perspicuous, lucid mean quickly and easily understood. clear implies freedom from obscurity, ambiguity, or undue complexity. clear instructions perspicuous applies to a style that is simple and elegant as well as clear. a perspicuous style lucid suggests a clear logical coherence and evident order of arrangement. a lucid explanation

Compatibility modes

There is a certain number of compatibility mode shortcuts, namely:

  • (default) — Internet Explorer 10+ compatibility mode
  • — Internet Explorer 9+ compatibility mode
  • — Internet Explorer 8+ compatibility mode
  • — Internet Explorer 7+ compatibility mode
newCleanCSS({  compatibility{    colors{      opacitytrue},    properties{      backgroundClipMergingtrue,      backgroundOriginMergingtrue,      backgroundSizeMergingtrue,      colorstrue,      ieBangHackfalse,      ieFiltersfalse,      iePrefixHackfalse,      ieSuffixHackfalse,      mergingtrue,      shorterLengthUnitsfalse,      spaceAfterClosingBracetrue,      urlQuotesfalse,      zeroUnitstrue},    selectors{      adjacentSpacefalse,      ie7Hacktrue,      mergeablePseudoClasses':active',...,      mergeablePseudoElements'::after',...,      mergeLimit8191,      multiplePseudoMergingtrue},    units{      chtrue,      intrue,      pctrue,      pttrue,      remtrue,      vhtrue,      vmtrue,      vmaxtrue,      vmintrue}}})

You can also use a string when setting a compatibility mode, e.g.

newCleanCSS({  compatibility'ie9,-properties.merging'})

Создание плавающих контейнеров при помощи float


Изначально элементы веб-страницы располагаются на ней друг за другом, в том порядке, в котором определены в html-коде. Размещая в коде теги абзацев, заголовков, списков и др. на странице мы видим их в том же порядке. Но при помощи некоторых атрибутов css мы можем изменить этот порядок. Один из них float.

Правило float позволяет нам создавать так называемые плавающие элементы. То есть мы можем установить для блочного элемента выравнивание по левому или правому краю родительского элемента (блочного контейнера, в который он вложен, или самой Web-страницы). При этом блочный элемент будет прижиматься к соответствующему краю родителя, а остальное содержимое будет обтекать его с противоположной стороны. Подобное мы уже видели в чистом html, когда рассматривали атрибут align со значениями left и right для тега img, который используется для вставки картинок на веб-страницу.

У этого правила может быть три возможных значения:

float: left|right|none|inherit

По умолчанию float использует значение none, то есть элементы не имеют никакого обтекания и идут по порядку друг за другом.

Значения left и right выравнивают элемент веб-страницы соответственно по левому и правому краю родительского элемента, а остальное содержимое будет обтекать его с противоположной стороны.

Рассмотрим два блочных элемента. Для начала просто подсветим их фоном различным цветом с помощью правила background:

<div style=»background:silver»>Содержимое первого блочного элемента</div> <div style=»background:«>Содержимое второго блочного элемента</div>

Так они ведут себя в обычном случае:

А теперь для первого div-а давайте пропишем правило float со значением left, и зададим ему отступы с помощью свойства margin для наглядности его взаимодействия с соседним тегом:

<div style=»background:silver; float:left; margin:4px;»>Содержимое первого блочного элемента</div> <div style=»background:«>Содержимое второго блочного элемента</div>

Как видим, первый div стал выравниваться по левому краю, а содержимое соседнего элемента сало обтекать его по правой стороне.

При применении правила float к строчным элементам, последние начинают вести себя как блочные при взаимодействии с другими элементами web-страниц. Так, например, в обычных ситуациях правила height и width для строчных элементов работать не будут. Но после применения атрибута float, параметры размеров сразу начинают иметь значения.

Давайте к предыдущему примеры добавим элемент span и в стилях пропишем для него размеры:

<span style=»background: #CEE2D3; width:200px; height:100px;float:left»>Содержимое строчного элемента span</span><div style=»background:silver; float:left; margin:4px;»>Содержимое первого блочного элемента</div> <div style=»background:«>Содержимое второго блочного элемента</div>

На рисунке видно, что правила width и height для span-а не сработали и его размеры стали равны в соответствии с его содержимым.

Теперь добавим элементу span правило float со значением left:

<span style=»background: #CEE2D3; width:200px; height:100px;float:left»>Содержимое строчного элемента span</span> <div style=»background:silver;»>Содержимое первого блочного элемента</div> <div style=»background: #fd0″>Содержимое второго блочного элемента</div>

Теперь элемент span приобрел размеры в соответствии с правилами css, а соседние элементы стали обтекать его с правой стороны. Из этого можно сделать вывод, что правило float можно применять как к строчным, так и к блочным элементам. Причем не зависимо от того к какому элементу применяется правило, он становится блочным.

А что если задать одинаковое значение атрибута стиля float для нескольких следующих друг за другом элементов? Давайте посмотрим:

<span style=»background: #CEE2D3; width:100px; float:left»>Содержимое строчного элемента span</span> <div style=»background:silver; width:100px; float:left»>Содержимое первого блочного элемента</div> <div style=»background: #fd0; width:100px; float:left»>Содержимое второго блочного элемента</div>

Они выстроятся по горизонтали друг за другом в том порядке, в котором они прописаны в html-коде, и будут выровнены по указанному краю родительского элемента.

Остается заметить, что правило float применяется при блочной верстке, основанной на плавающих контейнерах. При применении такого дизайна часто приходится помещать какие-либо элементы ниже тех, что были выровнены по левому или правому краю. Если просто убрать у них правило стиля float или задать для него значение none, результат будет непредсказуемым. В этом случае на помощь приходит правило clear.

Minify method


Once configured clean-css provides a method to optimize a given CSS, e.g.

var output =newCleanCSS(options).minify(source);

The output of the method is a hash with following fields:

console.log(output.styles);console.log(output.sourceMap);console.log(output.errors);console.log(output.warnings);console.log(output.stats.originalSize);console.log(output.stats.minifiedSize);console.log(output.stats.timeSpent);console.log(output.stats.efficiency);

The method also accepts an input source map, e.g.

var output =newCleanCSS(options).minify(source, inputSourceMap);

or a callback invoked when optimizations are finished, e.g.

newCleanCSS(options).minify(source,function(error,output){});

Fetch option

The option accepts a function which handles remote resource fetching, e.g.

var request =require('request');var source ='@import url(http://example.com/path/to/stylesheet.css);';newCleanCSS({fetchfunction(uri,inlineRequest,inlineTimeout,callback){request(uri,function(error,response,body){if(error){callback(error,null);}elseif(response &&response.statusCode!=200){callback(response.statusCode,null);}else{callback(null, body);}});}}).minify(source);

This option provides a convenient way of overriding the default fetching logic if it doesn’t support a particular feature, say CONNECT proxies.

How to work with source maps?

To generate a source map, use option, e.g.:

newCleanCSS({ sourceMaptrue, rebaseTo pathToOutputDirectory }).minify(source,function(error,output){});

You can also pass an input source map directly as a 2nd argument to method:

newCleanCSS({ sourceMaptrue, rebaseTo pathToOutputDirectory }).minify(source, inputSourceMap,function(error,output){});

or even multiple input source maps at once:

newCleanCSS({ sourceMaptrue, rebaseTo pathToOutputDirectory }).minify({'path/to/source/1'{    styles'...styles...',    sourceMap'...source-map...'},'path/to/source/2'{    styles'...styles...',    sourceMap'...source-map...'}},function(error,output){});

Tips & Tricks

Use the notation instead of the standard one :

Clean-css will handle it automatically for you (since version 1.1) in the following cases:

  • When using the CLI:
    1. Use an output path via / to rebase URLs as relative to the output file.
    2. Use a root path via / to rebase URLs as absolute from the given root path.
    3. If you specify both then / takes precendence.
  • When using clean-css as a library:
    1. Use a combination of and options for relative rebase (same as 1 in CLI).
    2. Use a combination of and options for absolute rebase (same as 2 in CLI).
    3. takes precendence over as in CLI.

Source maps are supported since version 3.0.

To generate a source map, use switch, e.g.:

Name of the output file is required, so a map file, named by adding suffix to output file name, can be created (styles.min.css.map in this case).

To generate a source map, use option, e.g.:

newCleanCSS({ sourceMaptrue, target pathToOutputDirectory }).minify(source,function(minified){});

Using API you can also pass an input source map directly:

newCleanCSS({ sourceMap inputSourceMapAsString, target pathToOutputDirectory }).minify(source,function(minified){});

Or even multiple input source maps at once (available since version 3.1):

newCleanCSS({ sourceMaptrue, target pathToOutputDirectory }).minify({'path/to/source/1'{    styles'...styles...',    sourceMap'...source-map...'},'path/to/source/2'{    styles'...styles...',    sourceMap'...source-map...'}},function(minified){});
newCleanCSS().minify('path/to/file/one','path/to/file/two');
newCleanCSS().minify({'path/to/file/one'{    styles'contents of file one'},'path/to/file/two'{    styles'contents of file two'}});

Compatibility settings are controlled by switch (CLI) and option (library mode).

In both modes the following values are allowed:

  • — Internet Explorer 7 compatibility mode
  • — Internet Explorer 8 compatibility mode
  • or (default) — Internet Explorer 9+ compatibility mode
  • — — turn on (+) / off (-) / declarations removal
  • — turn on / off background-clip merging into shorthand
  • — turn on / off background-origin merging into shorthand
  • — turn on / off background-size merging into shorthand
  • — turn on / off any color optimizations
  • — turn on / off IE bang hack removal
  • — turn on / off IE prefix hack removal
  • — turn on / off IE suffix hack removal
  • — turn on / off property merging based on understandability
  • — turn on / off removing space after closing brace — into
  • — turn on / off quoting
  • — turn on / off units removal after a value
  • — turn on / off extra space before element
  • — turn on / off IE7 selector hack removal ()
  • — a regular expression with all special, unmergeable selectors (leave it empty unless you know what you are doing)
  • — turn on / off treating as a proper unit
  • — turn on / off treating as a proper unit
  • — turn on / off treating as a proper unit
  • — turn on / off treating as a proper unit
  • — turn on / off treating as a proper unit
  • — turn on / off treating as a proper unit
  • — turn on / off treating as a proper unit
  • — turn on / off treating as a proper unit
  • — turn on / off treating as a proper unit
  • — turn on / off treating as a proper unit

For example, using will ensure IE8 compatibility while enabling units so the following style can be shortened to , while in pure IE8 mode it can’t be.

To pass a single off (-) switch in CLI please use the following syntax .

In library mode you can also pass as a hash of options.

  • — does all the following operations on a block (think or at-rules);
  • — optimizes properties in rulesets and «flat at-rules» (like @font-face) by splitting them into components (e.g. into ), optimizing, and rebuilding them back. You may want to use option to control whether you want to turn multiple (long-hand) properties into a shorthand ones;
  • — gets rid of duplicate rulesets with exactly the same set of properties (think of including the same Sass / Less partial twice for no good reason);
  • — merges adjacent rulesets with the same selector or rules;
  • — identifies which properties are overridden in same-selector non-adjacent rulesets, and removes them;
  • — identifies same-selector non-adjacent rulesets which can be moved (!) to be merged, requires all intermediate rulesets to not redefine the moved properties, or if redefined to be either more coarse grained (e.g. vs ) or have the same value;
  • — same as the one above but for same-rules non-adjacent rulesets;
  • — tries to reorganize different-selector different-rules rulesets so they take less space, e.g. into ;
  • — removes duplicated at-rules;
  • — merges non-adjacent at-rules by same rules as above;

С этим читают