Доброго времени суток.
Есть два файла
login.html , который имеет следующий вид (@GItHub)
<!DOCTYPE html>
<html>
<head>
<title>Sign in</title>
<link href="/static/dist/css/theme/all.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body class="logged_out env-production windows signin">
<div class="wrapper">
<div id="start-of-content" class="accessibility-aid"></div>
<div class="site clearfix">
<div id="site-container" class="context-loader-container" data-pjax-container>
<div class="auth-form" id="login">
<form accept-charset="UTF-8" action="/session" method="post">
<div class="auth-form-header">
<h1>Sign in</h1>
</div>
<div class="auth-form-body">
<label for="login_field">
Username or Email
</label>
<input autocapitalize="off" autocorrect="off" autofocus="autofocus" class="input-block" id="login_field" name="login" tabindex="1" type="text" />
<label for="password">
Password <a href="/sessions/forgot_password">(forgot password)</a>
</label>
<input class="input-block" id="password" name="password" tabindex="2" type="password" />
<input class="button" name="commit" tabindex="3" type="submit" value="Sign in" />
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Ну и соответственно огромный файл "/static/dist/css/theme/all.css", в моем случае аж на 700 Кб + подключаются картинки, шрифты как внешние так и внутренние.
Так вот, вопрос в следующем, как можно сделать так, что бы на автомате генерировался необходимый css для конкретной страницы? Я имею ввиду, чтобы из огромного файла css брались селекторы и свойства только для тех элементов, которые есть на html странице.
Зачем мне это нужно? Потому что у меня есть стиль, который тупо мне сунули и сказали юзать его, тут ничего не поделаешь.. Согласитесь, для обычной html страницы на 50 строк грузить 700 Кб сжатого css ужасная затея.
P.S. Руками вытаскивать селекторы не вариант.
Заранее спасибо за решение или даже за совет.
Средний
