Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
Дмитрий Дмитрий
1 / 1 / 2
Регистрация: 17.09.2016
Сообщений: 432
1

Удалить не используемые классы в css

14.02.2018, 12:14. Просмотров 904. Ответов 34
Метки нет (Все метки)

Возник такой вопрос, есть утилита которая добавляет кнопку с выбранным в ней эффектом, эффектов css 20 шт, но используется только один для каждой кнопки, ну и соответственно при добавлении, например двух кнопок добавляется ещё 20 css эффектов, получается при добавлении двух кнопок добавляется 40 классов с эффектами, а используется всего два, что очень тормозит работу проекта.
Как с помощью скрипта можно удалять не используемые стили (классы) в css документе?
Пример:
Кнопка 1 использует эффект man
HTML5
1
<button type="button" class="button--manindexExtension1>
Кнопка 2 использует эффект bom
HTML5
1
<button type="button" class="button--bomindexExtension1>
т.е. из 20 эффектов используются два (man и bom), но в файл css добавляются все 20 классов с эффектами для каждой кнопки, вот их и нужно удалять раз они не используются. Названия 20 эффектов известны, я так понимаю, нужно создать массив с названиями эффектов и сравнивать их с использованными т.е. если button содержит класс man, bom то остальные классы из массива удаляются?

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.02.2018, 12:14
Ответы с готовыми решениями:

Как удалить css-файл
Как реализовать удаление целого css-файла? Либо заменить его. Либо...

Удалить медиа запрос в css документе
День добрый, подскажите как с помощью jQuery в css документе index.css удалить...

Бегущая строка / Часто используемые символы в строке
1) Нужно сделать бегущую строку в строке состояния браузера. Которая будет...

изменение изображения.используемые языки html и javascript
необходима помощь вставить в html файл изображение и 2 кнопки: увеличить и...

Удалить не используемые vlan на cisco
есть ли какая удобная метода удаления vlan с cisco коммутатора? Добавлено...

34
Уф
600 / 580 / 372
Регистрация: 13.07.2015
Сообщений: 1,767
Завершенные тесты: 1
14.02.2018, 16:14 2
почему ты решил что при добавлении кнопки списки стилей будут удваиваться?
проверил быстродействие на 10000 стилях, вообще не тормозит, у тебя причина лагов явно в другом
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>Привет</div>
<div>Привет</div>
<div>Привет</div>
<div>Привет</div>
<div>Привет</div>
<div>Привет</div>
<div>Привет</div>
<div>Привет</div>
<div>Привет</div>
<div>Привет</div>
<div>Привет</div>
<div>Привет</div>
<div>Привет</div>
<div>Привет</div>
<div>Привет</div>
Javascript
1
2
3
4
$('div').each(function(){
  var i = Math.floor(Math.random()*10000);
    $(this).addClass('class'+i).append(i);
});
стиль https://pastebin.com/raw/HKcWXduM

Добавлено через 42 секунды
CSS
1
2
3
4
5
.class1 { color: rgb(241,250,232); }
.class2 { color: rgb(119,140,158); }
...
.class9999 { color: rgb(4,7,189); }
.class10000 { color: rgb(141,236,236); }
0
Дмитрий Дмитрий
1 / 1 / 2
Регистрация: 17.09.2016
Сообщений: 432
14.02.2018, 16:20  [ТС] 3
Цитата Сообщение от Уф Посмотреть сообщение
почему ты решил что при добавлении кнопки списки стилей будут удваиваться?
Ну потому что я сам эту утилиту писал) по другому ни как не сделать, т.к. утилита прописывает все 20 эффектов, а используется один для одной кнопки, вот и получается, если добавить например, 10 кнопок то ненужных css эффектов будет аж 190, я уже не говорю сколько стилей каждый эффект содержит, за миллион строк выйдет))
0
Уф
600 / 580 / 372
Регистрация: 13.07.2015
Сообщений: 1,767
Завершенные тесты: 1
14.02.2018, 16:22 4
что за приложение? оно в браузере запускается или где?
0
Дмитрий Дмитрий
1 / 1 / 2
Регистрация: 17.09.2016
Сообщений: 432
14.02.2018, 16:23  [ТС] 5
Запускается в веб-конструкторе, ну а итог конечно браузер
0
Уф
600 / 580 / 372
Регистрация: 13.07.2015
Сообщений: 1,767
Завершенные тесты: 1
14.02.2018, 16:25 6
и как у тебя выглядит код добавления кнопки?
0
Дмитрий Дмитрий
1 / 1 / 2
Регистрация: 17.09.2016
Сообщений: 432
14.02.2018, 16:28  [ТС] 7
Да просто, хотелось как то уменьшить обьем файла ну и удалять не нужные классы стилей

Добавлено через 1 минуту
Пример одной кнопки с одним эффектом вот и получается, что прописывается ещё 19 эффектов с классами для каждой кнопки

Добавлено через 47 секунд
Давольно массивный css файл получается, да и много не используемого кода
0
Уф
600 / 580 / 372
Регистрация: 13.07.2015
Сообщений: 1,767
Завершенные тесты: 1
14.02.2018, 16:31 8
как получается? я не пойму. ты подключил стили вверху и все. их там 20 штук, браузер их считал и просто хранит в памяти, а добавляемые элементы сверяет с этим массивом стилей, никакого дублирования не происходит
0
Дмитрий Дмитрий
1 / 1 / 2
Регистрация: 17.09.2016
Сообщений: 432
14.02.2018, 16:37  [ТС] 9
вот так и происходит добавляется кнопка+добавляются опять эти же стили только с другой цыфрой
0
Уф
600 / 580 / 372
Регистрация: 13.07.2015
Сообщений: 1,767
Завершенные тесты: 1
14.02.2018, 16:40 10
проблемы которую ты описываешь нет. откуда возьмутся миллион строк?
0
Дмитрий Дмитрий
1 / 1 / 2
Регистрация: 17.09.2016
Сообщений: 432
14.02.2018, 16:45  [ТС] 11
Ну щас ты видишь один эффект для одной кнопки, я не буду ведь все 20 эффектов показывать), а на самом деле добавил кнопку добавилось двадцать эффектов с множеством классов и так для каждой кнопки

Добавлено через 2 минуты
Я могу скинуть архив вличку, посмотришь)?
0
Уф
600 / 580 / 372
Регистрация: 13.07.2015
Сообщений: 1,767
Завершенные тесты: 1
14.02.2018, 16:56 12
добавил кнопку, значит добавил кнопку, а не добавил кнопку и 20 классов к ней

Добавлено через 30 секунд
скинь, посмотрим что там
0
Дмитрий Дмитрий
1 / 1 / 2
Регистрация: 17.09.2016
Сообщений: 432
14.02.2018, 16:59  [ТС] 13
Ссылку вличку написал
 Комментарий модератора 

Правила форума

4.6 Обсуждение вопросов - только в теме на форуме. Приглашения к обсуждению еще где-либо (в том числе и с помощью системы личных сообщений) запрещены, за исключением коммерческих разделов.
0
Уф
600 / 580 / 372
Регистрация: 13.07.2015
Сообщений: 1,767
Завершенные тесты: 1
14.02.2018, 17:11 14
не считая что файл стилей весит 4мб проблем нет. ничего не дублируется.
вырезать стили для пары кнопок ты можешь вручную
0
Дмитрий Дмитрий
1 / 1 / 2
Регистрация: 17.09.2016
Сообщений: 432
14.02.2018, 17:42  [ТС] 15
Цитата Сообщение от Уф Посмотреть сообщение
не считая что файл стилей весит 4мб проблем нет
ты считаешь нормальным что на одних стилях файл весит 4мб))? да это капец. Я то конечно могу удалить сам вручную, но другие думаю наврядли согласятся это делать)
Ну если не вдаваться в полемику как сделать удаление не используемых классов?
0
Уф
600 / 580 / 372
Регистрация: 13.07.2015
Сообщений: 1,767
Завершенные тесты: 1
15.02.2018, 10:47 16
можно в пхп сделать
style.php
PHP
1
2
3
header(“Content-type: text/css”);
$s = file_get_contents('css/index.css');
//тут всякой магией вырезаешь из текста нужные стили
и подключаешь файл стилей style.php, он все вырежет

Добавлено через 7 минут
PHP
1
2
3
4
5
6
7
8
//например разбиваем файл по закрывающей скобке
$sa = explode ( '}' , $s );
//потом проходим по нему и разбиваем по открывающей скобке
$st = array();
foreach($sa as $el) {
   $sp = explode ( '{' , $el );
   $st[ trim($sp[0]) ] = trim( $sp[1] ); //trim удалит лишние пробелы и переносы строк
}
получаешь массив вида селектор - стиль

#indexLayoutGrid5 => -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 20px 15px 20px 15px;
margin-right: auto;
margin-left: auto;

потом перечисляешь какие хочешь вывести и выводишь
PHP
1
2
$my = array('#indexLayoutGrid5','#wb_indexLayoutGrid5');
foreach($my as $t) echo "$t {\n ".($st[$t])."\n}\n";
Добавлено через 2 минуты
а можно еще и текст страницы в этом стиле открыть и поиском вырезать попавшиеся классы и только их загрузить
1
Дмитрий Дмитрий
1 / 1 / 2
Регистрация: 17.09.2016
Сообщений: 432
15.02.2018, 12:11  [ТС] 17
Цитата Сообщение от Уф Посмотреть сообщение
а можно еще и текст страницы в этом стиле открыть и поиском вырезать попавшиеся классы и только их загрузить
можно пример

Добавлено через 37 минут
Цитата Сообщение от Уф Посмотреть сообщение
и подключаешь файл стилей style.php, он все вырежет
Подключать в index.html?
PHP
1
<?php include("style.php"); ?>
0
Уф
600 / 580 / 372
Регистрация: 13.07.2015
Сообщений: 1,767
Завершенные тесты: 1
15.02.2018, 12:59 18
нет, просто
HTML5
1
<link href="style.php" rel="stylesheet">
1
Дмитрий Дмитрий
1 / 1 / 2
Регистрация: 17.09.2016
Сообщений: 432
15.02.2018, 13:47  [ТС] 19
Добавлено через 36 секунд
Сам файл style.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
    header(“Content-type: text/css”);
$s = file_get_contents('css/index.css');
//тут всякой магией вырезаешь из текста нужные стили
//например разбиваем файл по закрывающей скобке
$sa = explode ( '}' , $s );
//потом проходим по нему и разбиваем по открывающей скобке
$st = array();
foreach($sa as $el) {
   $sp = explode ( '{' , $el );
   $st[ trim($sp[0]) ] = trim( $sp[1] ); //trim удалит лишние пробелы и переносы строк
}
$my = array('.button--winonaindexExtension1','.button--winonaindexExtension2');
foreach($my as $t) echo "$t {\n ".($st[$t])."\n}\n";
?>
Добавлено через 4 минуты
вот что получается в style.php
PHP
1
2
3
4
5
6
.button--winonaindexExtension1 {
 
}
.button--winonaindexExtension2 {
 
}
Но в style.css всё как было так и есть
0
Уф
600 / 580 / 372
Регистрация: 13.07.2015
Сообщений: 1,767
Завершенные тесты: 1
15.02.2018, 14:58 20
попробуй так
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
header('Content-type: text/css');
$s = file_get_contents('css/index.css');
//тут всякой магией вырезаешь из текста нужные стили
 
// удаляем многострочные комментарии /* */
$s = preg_replace('#/\*(?:[^*]*(?:\*(?!/))*)*\*/#','',$s);
 
//например разбиваем файл по закрывающей скобке
$sa = explode ( '}' , $s );
//потом проходим по нему и разбиваем по открывающей скобке
$st = array();
foreach($sa as $el) {
   $sp = explode ( '{' , $el );
   $st[ trim($sp[0]) ] = trim( $sp[1] ); //trim удалит лишние пробелы и переносы строк
}
$my = array('.button--winonaindexExtension1','.button--winonaindexExtension2');
foreach($my as $t) echo "$t {\n ".($st[$t])."\n}\n";
?>
1
15.02.2018, 14:58
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.02.2018, 14:58

Основы css, css классы
Я новичок поэтому не смейтесь. вот есть классы css. &lt;div...

Css и классы
Изучаю CSS. Вроде бы ничего сложного, но никак не могу понять смысл...

php и классы css
можно ли как-то в ксс заместо значений вставить переменные?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru