@tenorok21 окт 2013 в 12:32

AutoclassCSS — быстрый каркас на основе HTML

2 мин

15K

CSS *

+22

Комментарии 58

@lacki 21 окт 2013 в 13:22

FYI: Есть похожая разработка: grunt-init-block для Grunt.

@tenorok 21 окт 2013 в 14:54

Спасибо, я не знал о ней.
Интересна идея вытаскивать из html конкретный блок.
Жаль только, что вложенность тегов не повторяется.

@DAREDEVIL 22 окт 2013 в 07:38

Я автор этого грант-плагина. Если есть вопросы, буду рад :)

Жаль только, что вложенность тегов не повторяется.

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

@tenorok 22 окт 2013 в 07:44

Да, я так и понял. Это чисто БЭМ-подход.
Мне хотелось сделать инструмент, который не будет полностью завязан на методологии, для большей свободы.

@monolithed 21 окт 2013 в 17:51

Добавьте возможность использования регелурных выражений в ignore, т.к. в большинстве случаев, просто используется префикс:

<div class="foo__bar_baz js-foo__bar_baz" />

И еще, сделайте опции в виде хеша, а не методов.

@tenorok 22 окт 2013 в 07:48

Добавил issue про ignore.
Сначала я тоже хотел сделать опции в виде хеша, но потом передумал в пользу отдельных методов, поскольку это выразительнее и гибче.

@monolithed 22 окт 2013 в 08:25

Опции всегда должны описываться в декларативном стиле.

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

Насчет гибкости не понял. За счет чего она должна достигатья?
Как-правило, настройки все хранят в отдельном файле, в вашем же случае без «магии» не обойтись.

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

# config.yaml

brace:  ['newline']
ignore: ['js-.*']
flat:      true
indent: 'tabs'
inner:   true
line:     true

// project1.js

var options = Object.mixin({
  tag: 'true',
  ignore: ['foo']
}, options);

new Autoclasscss(options);

// project2.js

var options = Object.mixin({
  ignore: ['bar', 'js-*']
}, options);

new Autoclasscss(options);

@tenorok 22 окт 2013 в 09:08

Например, ignore добавляет игнорируемые классы, а не полностью переопределяет заданный ранее список.

Можно сделать обёртку, которая будет возвращать экземпляр со стандартными настройками.

return (function() {
    return new Autoclasscss().tag(true).flat(false);
})();

И на проектах использовать её, переопределяя необходимые опции.

require('autoclasscss').tag(false).set('<html>').get();

@monolithed 22 окт 2013 в 09:12

Все-таки опции должны оставаться оставаться опциями, а не методами.

Представтьте что, кто-то захочет добавить ваш плагин в грант.

@tenorok 23 окт 2013 в 10:39

Убедили, добавил issue.

@monolithed 21 окт 2013 в 20:37

Зачем вы используете window?

var __global__ = typeof global !== 'undefined' ? global : function (object) {
    return object;
}(this);

@alexanderzaytsev 21 окт 2013 в 22:27

(0,eval)('this')

@monolithed 22 окт 2013 в 07:07

Тогда уж:

Function ('return this')();

Но зачем?

@alexanderzaytsev 22 окт 2013 в 07:24

Чтобы гарантированно получить глобальный контекст + минимум кода.

@monolithed 22 окт 2013 в 08:07

eval в первую очередь зло.
А минимум кода должено должно достигаться за счет сжатия

@alexanderzaytsev 22 окт 2013 в 08:13

1. Не будьте так категоричны
2. Function(/*body*/) — это форма eval
3. Сжимальщику иногда нужно помогать.

@monolithed 22 окт 2013 в 08:29

1. Не будьте так категоричны

Просто так не нужно писать, тем более для таких простых вещей как получение ссылки на глобальный объект.

2. Function(/*body*/) — это форма eval

Именно по этому я ее и привел, т.к. это почти единственная форма динамического исполнения кода, которая допустима в строгом режиме.

3. Сжимальщику иногда нужно помогать.

Вот что должно помогать developers.google.com/closure/compiler/docs/js-for-compiler

@tenorok 22 окт 2013 в 08:33

Почему нельзя просто?
(function(global) {
…
})(this);

@alexanderzaytsev 22 окт 2013 в 08:35

Потому что так не получится, если используется AMD.

@tenorok 22 окт 2013 в 08:38

Да, но у меня не используется AMD.
А если надо применить этот скрипт в AMD, то его достаточно вызвать в нужном контексте.

@monolithed 22 окт 2013 в 08:45

Ага, понимание того как и где это может испольваться приходит не сразу!

@monolithed 22 окт 2013 в 08:41

Конечно можно, только так:

(function(global) {
  //..
}).call(this);

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

@alexanderzaytsev 22 окт 2013 в 08:46

Только то, что вы написали — неправильно. global у вас будет undefined.

@monolithed 22 окт 2013 в 09:21

Я хотел показать что в таком случае this будет ссылаться на глобальный объект;
Хотя конечно, лучше оставить global, чем передавать два объекта

@alexanderzaytsev 22 окт 2013 в 09:23

Не будет

@monolithed 22 окт 2013 в 09:40

'use strict';

(function () {
  alert(this);
}).call(this);

@alexanderzaytsev 22 окт 2013 в 09:44

Я не понимаю, что вы мне пытаетесь доказать?

!function () { 'use strict';

(function () {
  alert(this);
}).call(this); }()

@monolithed 22 окт 2013 в 09:53

Вы первый начали это троллинг.

Просто я действительно не понимаю зачем использовать eval, если можно использовать конструктор Function (пусть даже это тоже eval)?

@monolithed 22 окт 2013 в 09:58

Хотя я конечно согласен, что для библиотеки, которая будет использоваться «не пойми как», без «eval» для получения ссылки на глобальный объект не обойтись.

@alexanderzaytsev 22 окт 2013 в 08:44

Просто так не нужно писать, тем более для таких простых вещей как получение ссылки на глобальный объект.

Расскажите этим ребятам github.com/knockout/knockout/blob/master/build/fragments/extern-pre.js#L4

единственная форма динамического исполнения кода, которая допустима в строгом режиме.

Вот врать-то зачем? eval прекрасно работает в strict mode.

@monolithed 22 окт 2013 в 08:59

Вот врать-то зачем? eval прекрасно работает в strict mode.

The eval code cannot instantiate variable or function bindings in the variable environment of the calling context that invoked the eval if either the code of the calling context or the eval code is strict code. Instead such bindings are instantiated in a new VariableEnvironment that is only accessible to the eval code.

Такая конструкция?

(0,eval)('this')

А вот такое заработает?

(function eval () { 
  'use strict'; 
    alert(this);
})();

@alexanderzaytsev 22 окт 2013 в 09:13

1. В strict mode eval сделали безопаснее, об этом и речь в приведенной цитате. Т.е. все что происходит внутри eval — остается внутри eval.

2. Причем тут вообще второй пример? Он не будет работать, потому что в strict mode нельзя переопределять eval и arguments.

Вот, вам чтиво на вечер sriku.org/blog/2012/08/28/on-eval-being-evil/

@monolithed 22 окт 2013 в 09:18

Не нужно мне кидать всякие левые сслылки, в спецификации все и так подробно написано.

@alexanderzaytsev 22 окт 2013 в 09:25

Вам нужно провериться у психоаналитика, у вас походу эгоцентризм.

@monolithed 22 окт 2013 в 09:14

Ну или менее экзотическое:

(function() {
    'use strict';

    eval('var x = 1;');

    alert(x);  // Uncaught ReferenceError: x is not defined 
}());

@alexanderzaytsev 22 окт 2013 в 09:20

Все, правильно — eval стал безопаснее, и не засоряет вызывающий контекст лишними переменными.

Хотите объявлять переменные в родительском контексте, ~~делайте так: this.x = 1;~~ никогда не делайте так, и так, как в примере выше.

(function() {
    'use strict';

    eval('this.x = 1;');

    alert(x); // 1
}.call(this)); //нужно, т.к. иначе в strict mode this будет undefined.

@alexanderzaytsev 22 окт 2013 в 09:56

И, кстати,

Function('var x = 1;')()

Всегда работает аналогично eval'у в strict mode.

@deepsweet 22 окт 2013 в 15:59

(function () {
    'use strict';
    alert(Function('return this')());
})();

отсюда.
по-моему самый «человечный» вариант, как на мой взгляд, нежели запятые и eval:

Functions that are created with the Function constructor are strict only if they start with a Use Strict Directive, they don't «inherit» the strictness of the current context as Function Declarations or Function Expressions do

@alexanderzaytsev 22 окт 2013 в 19:05

Я имел ввиду не полностью аналогично, а примерно так:

"Function, в отношении объявления переменных всегда работает аналогично eval'у в strict mode."

@monolithed 22 окт 2013 в 19:21

За одним лишь исключением — код подаваемый в конструктор Function, в отличии от eval может быть оптимизирован (в V8 точно).

@alexanderzaytsev 22 окт 2013 в 19:36

Что можно оптимизировать в 'this' или 'return this'?

@monolithed 23 окт 2013 в 12:18

Да это просто к слову :)

@tenorok 22 окт 2013 в 08:18

Потому что рассчитываю на использование только в браузере.
Как вы думаете, нужен ли CLI для этой штуки?

@monolithed 22 окт 2013 в 08:43

А зачем это в браузере?

@tenorok 22 окт 2013 в 08:49

Ну, чтобы можно было написать html, открыть в браузере страничку с визуальным интерфейсом и скопировать от туда результирующий css.

@monolithed 22 окт 2013 в 09:45

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

@tenorok 22 окт 2013 в 10:04

Добавил issue.

@monolithed 22 окт 2013 в 07:16

А можно не перезаписывать CSS-файл?

@tenorok 22 окт 2013 в 07:49

Не понял вопрос.

@monolithed 22 окт 2013 в 08:10

Если настрить вывод в определенный файл, в котором уже есть стили, то они перезапишутся.

@tenorok 22 окт 2013 в 08:12

Вы же сами настраиваете вывод, сделайте так, чтобы он добавлялся в конец :)

@monolithed 22 окт 2013 в 08:30

А на сколько сложно будет сделать чтобы правила добавлялись в нужном семантическом порядке?

@tenorok 22 окт 2013 в 08:52

Речь идёт о сортировке css-свойств?
Для этого есть классная штука, csscomb.

@monolithed 22 окт 2013 в 09:09

Представьте что у меня есть такая разметка:

<header class="page">
    <span class="page__element">
</header>

CSS-код, который получился:

.page {
    
}
    .page__element {
        
    }

Затем я добавтл стили:

.page {
      width: 100px;
}
    .page__element {
          color: red;
    }

И через какое-то время, я решил добавить еще один модификатор в разметку:

<header class="page">
    <span class="page__element page__element_gren">
</header>

И ожидаю что в стилях будет следующее:

.page {
       width: 100px;   
}
    .page__element {
        color: red;
    }
        .page__element_gren {

        }

А на деле:

.page {
    
}
    .page__element {
        
    }
    .page__element_gren {
        
    }

@tenorok 22 окт 2013 в 09:46

Понял идею. Это конечно круто, но тяжело будет сделать.
Если что, могу рассмотреть пулреквест :)

@funca 22 окт 2013 в 08:00

возможно кому-то пригодится github.com/generalov/bem-reverse

split-css.js — раскладывает блочный css на отдельные файлы для элементов и модификаторов внутри одного уровня переопределения. полезно для быстрого прототипирования.
reverse-html.js — строит bemjson по html с классами в bem-стиле
reverse-css.js — распиливает скомпилированную css, с учетом уровней переопределения.

писалось, для о-bem-ливания верстки прототипов и изучения логики bem-tools на примере реальных яндексных сайтов. кстати, благодаря БЭМ код у них получается хорошо отделимым. =)

@mursya 22 окт 2013 в 09:22

неплохо бы это все в ридми добавить :)

@dizzoid 22 окт 2013 в 09:12

Спрашивал у Хабр жителей такое решение.
Вот что советовали:

javascript:var g=[];for(var i in document.all) if(document.all.hasOwnProperty(i) && document.all[i].id) g.push('#'+document.all[i].id); alert(g.join("\n"));

автор CAH4A

Зарегистрируйтесь на Хабре, чтобы оставить комментарий