Программировать отдельную таблицу стилей в таблицы подстатей?

Ответ 1

Это должно помочь вам:

#!/usr/bin/env python
import cssutils

PATH_TO_CSS_FILE = 'old_huge_css_file.css'

LAYOUT = ('display', 'width', 'height', 'margin', 'padding',
          'position', 'top', 'left', 'bottom', 'right')
COLOR = ('color', 'background', 'border', 'background-color')
FONTS = ('font', 'font-size')

def strip_styles(infile_path, outfile_path, properties_to_keep):
    stylesheet = cssutils.parseFile(infile_path)

    for rule in stylesheet:
        if not rule.type == rule.STYLE_RULE:
            continue

        [ rule.style.removeProperty(p) for p in rule.style.keys() 
            if not p in properties_to_keep ]

    f = open(outfile_path, 'w')
    f.write(stylesheet.cssText)
    f.close()

segments = (
    ('layout.css', LAYOUT),
    ('color.css', COLOR),
    ('fonts.css', FONTS),
)

for segment in segments:
    strip_styles(PATH_TO_CSS_FILE, *segment)

Вам понадобится CssUtils

И, очевидно, я не заполнял кортежи в начале всеми возможными свойствами css. Я оставлю это как упражнение для читателя

note: он оставит все комментарии в таблице стилей, хотя многие из них не будут относиться к разделенным стилям.

Кроме того, все стили, не перечисленные в переменных LAYOUT, COLOR и FONTS в верхней части, будут отфильтрованы.

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

Ответ 2

Вот как бы я это сделал:

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

Для шага 2 вы можете сэкономить много времени, используя поиск/замену в редакторе, таком как Notepad ++. Например, в layout.css вы можете выполнить поиск регулярных выражений ^.*background:.+$ и заменить его ничем. (Затем в конце удалите все пустые строки.)

В теории вы должны иметь возможность уменьшить это до нескольких регулярных выражений для каждого файла, но Notepad ++, похоже, не похож на символ канала или скобки в этом отношении. ^.*background(-color|-image)?:.+$ должен работать, но это не так.

Это не программно, но TBH к тому времени, когда вы написали свой собственный код, чтобы делать то, что вы просите, могли бы набрать стили с нуля.

Ответ 3

Сканируй свой собственный. Действительный CSS не должен быть ужасно трудным для анализа.

• Разделить весь файл на }
• В каждом из них, что перед { является селектором
• Разделите то, что приходит после { на ;, чтобы получить каждое отдельное правило для каждого селектора
• Оцените каждое правило и создайте файлы соответственно.

Полупростой код VB.NET...

 Dim CssFile as String = System.IO.File.ReadAllText("MyFile.css")
 Dim CssRules as String() = CssFile.Split("}")

 For Each Rule as String in CssRules
     Dim Selector as String = Rule.Substring(0, Rule.IndexOf("{")).Trim();
     Dim Styles as String() = Rule.Substring(Rule.IndexOf("{") + 1).Trim().Split(";");

     For Each Style as String in Styles
         If Style.StartsWith("font") Then 
              ' Build your files... yada, yada, yada
         End If
     Next
 Next

Ответ 4

У вас есть командная строка grep? Вы заботитесь о комментариях в результатах? Можете ли вы сделать первый проход для очистки форматирования? Например, в вашем редакторе выбора убедитесь, что за {, } и ; следует новая строка. Тогда они могут вас закрыть:

grep -i '[{]\|[}]\|background\|border\|color' source.css > color.css
grep -i '[{]\|[}]\|font\|letter\|line-height' source.css > font.css
grep -v 'background\|border\|color\|font\|letter\|line-height' source.css > layout.css

Вам нужно будет внести коррективы, если вы не хотите, чтобы в layout.css не были теги из следующих тегов: outline-*, text-*, white-space, word-spacing. То есть, если ваш css использует их. Я также быстро посмотрю, какие теги вы используете на самом деле. Например,

grep -v '[{]\|[}]' test2.css | sed -e 's/:.*$//g' | sort -u

Ответ 5

Легкой частью будет синтаксический анализ CSS. Трудная часть классифицирует различные директивы CSS и предвосхищает короткие селектора CSS.

CSSTidy может быть билетом с некоторыми изменениями. Мало того, что он будет анализировать CSS, но он также будет консолидировать свойства CSS, когда это возможно:

http://csstidy.sourceforge.net/download.php

Ответ 6

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

www.blueprintcss.org

Ответ 7

Кажется, что это полезный инструмент, я думал, что он может уже существовать, но я ничего не мог найти.

Думаю, вам, вероятно, понадобится его создать. Для этого вы, вероятно, можете использовать одну из многих существующих библиотек или программ парсера CSS, которые находятся там.

Быстрый поиск показывает несколько в .NET, Java, Ruby и т.д. На StackOverflow даже возникают вопросы об этом.

Ответ 8

Действительно легко свернуть свой script. Здесь - это библиотека для css в ruby, поэтому вы можете найти ее на любой платформе, в которой вы используете

Ответ 9

* Split the entire file by }
* In each of those, what comes before the { is the selector
* Split what comes after { by ; to get each individual rule for each selector
* Evaluate each rule and build your files accordingly

Ответ 10

В последние месяцы я сделал два больших проекта с несколькими стилями.

В одном случае на странице были разные цвета и стили. В другом случае некоторые цвета и изображения были разными для целевых групп.

Я создал таблицу стилей main.css, в которой были размещены по умолчанию шрифты, интервал и все остальное, что вы ожидали бы в таблице стилей. Затем для каждой целевой группы я создал дополнительную таблицу стилей, содержащую конкретные цвета, шрифты и (фоновые) изображения.

В вашем случае, создав фреймворк, я бы хотя бы предположил следующие компоненты:

• Reset
• Main
• Книгопечатание

Одна вещь, которую следует иметь в виду, это количество HTTP-запросов, которые вы вызываете, вызывая другие таблицы стилей. Если возможно, используйте как можно меньше стилей.

Ответ 11

Задумывались ли вы об использовании программы, которая заботится о CSS для вас, вместо того, чтобы вручную просматривать и редактировать все это самостоятельно? Я недавно начал использовать стилизатор, и я впечатлен всеми функциями, которые он имеет (даже в бесплатной версии). Хотя он не будет разбивать файлы CSS, как вы хотите, насколько я могу судить.