19.08.14, 17:27
0 комментарий
  Уроки

Исключаем лишний CSS-код

Применение фреймворков вроде Bootstrap или Foundation – это один из наиболее быстрых способов создать адаптивный веб-сайт. Эти фреймворки предоставляют все необходимое, включая компоненты сетки и пользовательского интерфейса для создания отличительных и функциональных сайтов.

Однако фреймворки направлены на то, чтобы охватить максимальное количество возможных сценариев. Следовательно, они включают в себя множество заранее подготовленного CSS-кода, большая часть из которого зачастую остается ненужной для ваших веб-сайтов.

Ведь не каждый стиль подойдет сразу всем, и при этом размер таблиц стилей увеличивается, что сильно сказывается на скорости загрузки вашего веб-сайта. В нашей сегодняшней статье мы хотим рассказать вам о том, каким образом можно извлечь все лишние CSS-стили из ваших таблиц стилей.

Приступаем к работе

Чтобы сделать то, что задумали, нам потребуется Grunt CLI. Так что, не забудьте установить этот инструмент на компьютер. Чтобы поближе познакомиться с ним, можете прочесть следующие статьи:

* How To Remove Unnecessary Modules In jQuery (Исключаем необязательные модули из jQuery)
* Solving Grunt “Command Not Found” Error In Terminal (Устраняем ошибку “Command Not Found” в терминале Grunt)

Мы предположим, что папка с вашим проектом уже готова, и содержит в себе необходимые HTML и CSS-файлы.

Как можно видеть на представленном скриншоте, у нас здесь две папки под названием build (здесь мы будем сохранять таблицы стилей в ходе разработки) и css (эта папка нужна для сохранения финального результата).

Исключаем лишний CSS-код


еперь пройдите в папку проекта посредством Терминала и впишите следующую команду. Эти две команды, устанавливают Grunt и grunt-uncss, - это и есть плагин Grunt, который потребуется нам для запуска задачи по удалению ненужного CSS-кода.

npm install grunt --save-deve
npm install grunt-uncss --save-deve


Базовые настройки

Создайте файл Gruntfile.js в папке с вашим проектом. Откройте его в редакторе кода, и внесите туда следующий код:

module.exports = function(grunt) {
	grunt.initConfig({
		uncss: {
		dist: {
			files: {
				'css/style.css': ['index.html']
			}
		}
	});
	grunt.loadNpmTasks('grunt-uncss');
	grunt.registerTask('default', 'uncss');
}


Вышеприведенный код – это базовая настройка плагина. grunt-uncss воспользуется ссылками на таблицы стилей, указанными в .html, определит css-селекторы, которые не используются в указанном html-документе, и выведет вам финальный результат в документ css/style.css.

Опциональные настройки

grunt-uncss представлен с несколькими опциями. Предположим, что вам нужно, чтобы плагин игнорировал определенные селекторы. Тогда вы можете воспользоваться параметром ignore и указать селекторы следующим образом:

module.exports = function(grunt) {
	grunt.initConfig({
		uncss: {
		dist: {
			files: {
				'css/style.css': ['index.html']
			}
		},
		options: {
			ignore: ['#id-to-ignore', '.auto-generated-class', '.ignore-this-class'],
			}
		}
	});
	grunt.loadNpmTasks('grunt-uncss');
	grunt.registerTask('default', 'uncss');
}


Вы также можете настроить grunt-css на работу только с определенными таблицами стилей, примененными в HTML-документе.

module.exports = function(grunt) {
	grunt.initConfig({
		uncss: {
		dist: {
			files: {
				'css/style.css': ['index.html']
			}
		},
		options: {
			ignore: ['#id-to-ignore', '.auto-generated-class', '.ignore-this-class'],
			stylesheets: ['build/style.css']
			}
		}
	});
	grunt.loadNpmTasks('grunt-uncss');
	grunt.registerTask('default', 'uncss');
}


Настройте путь до файла результата в соответствии с требованиями к вашему проекту.

Запуск UnCSS

Ниже представлено содержимое нашего HTML-файла.

<html>
	<head>
		<title>CSS Unloaded</title>
		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.0/normalize.min.css">
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div class="wrapper">
			<h1 class="page-title">Unload CSS</h1>
			<div class="first-div"><p>1st</p></div>
			<div class="second-div"><p>2nd</p></div>
			<div class="third-div"><p>3rd</p></div>
		</div>
	</body>
</html>


А это содержимое наших каскадных таблиц стилей:

.wrapper {
	width: 960px;
	margin: 60px auto;
}
.page-title {
	color: red;
}
.first-div, .second-div, .third-div, .fourth-div {
	width: 100px;
	height: 100px;
}
.first-div {
	background-color: #000;
	color: #fff;
}
.second-div {
	background-color: #555;
	color: #ccc;
}
.third-div {
	background-color: #ccc;
	color: #f3f3f3;
}
.fourth-div {
	background-color: #aaa;	
	color: #777;
	position: absolute;
}


Единственный класс, который отсутствует в HTML-документе, - это .fourth-div. Он был исключен из таблиц стилей. Запустите Терминал, и напишите grunt, чтобы выполнить поставленную задачу в Gruntfile.js.

Исключаем лишний CSS-код


Откройте оба CSS-файла. Вы увидите, что селектор класса .fourth-div уже исключен и не используется в HTML.

Исключаем лишний CSS-код


Когда у вас несколько неиспользуемых стилей, этот метод поможет вам существенно сократить размер файла с каскадными таблицами стилей.

Напишите своё мнение