tenorok Oct 21 2013 at 16:32

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

2 min

15K

CSS*

+23

Comments 58

lacki Oct 21 2013 at 17:22

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

tenorok Oct 21 2013 at 18:54

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

DAREDEVIL Oct 22 2013 at 11:38

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

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

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

tenorok Oct 22 2013 at 11:44

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

monolithed Oct 21 2013 at 21:51

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

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

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

tenorok Oct 22 2013 at 11:48

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

monolithed Oct 22 2013 at 12: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 Oct 22 2013 at 13:08

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

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

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

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

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

monolithed Oct 22 2013 at 13:12

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

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

tenorok Oct 23 2013 at 14:39

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

monolithed Oct 22 2013 at 00:37

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

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

alexanderzaytsev Oct 22 2013 at 02:27

(0,eval)('this')

monolithed Oct 22 2013 at 11:07

Тогда уж:

Function ('return this')();

Но зачем?

alexanderzaytsev Oct 22 2013 at 11:24

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

monolithed Oct 22 2013 at 12:07

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

alexanderzaytsev Oct 22 2013 at 12:13

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

monolithed Oct 22 2013 at 12:29

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

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

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

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

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

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

tenorok Oct 22 2013 at 12:33

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

alexanderzaytsev Oct 22 2013 at 12:35

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

tenorok Oct 22 2013 at 12:38

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

monolithed Oct 22 2013 at 12:45

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

monolithed Oct 22 2013 at 12:41

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

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

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

alexanderzaytsev Oct 22 2013 at 12:46

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

monolithed Oct 22 2013 at 13:21

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

alexanderzaytsev Oct 22 2013 at 13:23

Не будет

monolithed Oct 22 2013 at 13:40

'use strict';

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

alexanderzaytsev Oct 22 2013 at 13:44

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

!function () { 'use strict';

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

monolithed Oct 22 2013 at 13:53

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

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

monolithed Oct 22 2013 at 13:58

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

alexanderzaytsev Oct 22 2013 at 12:44

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

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

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

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

monolithed Oct 22 2013 at 12: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);
})();

-1

alexanderzaytsev Oct 22 2013 at 13:13

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

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

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

monolithed Oct 22 2013 at 13:18

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

alexanderzaytsev Oct 22 2013 at 13:25

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

-1

monolithed Oct 22 2013 at 13:14

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

(function() {
    'use strict';

    eval('var x = 1;');

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

alexanderzaytsev Oct 22 2013 at 13:20

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

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

(function() {
    'use strict';

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

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

alexanderzaytsev Oct 22 2013 at 13:56

И, кстати,

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

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

deepsweet Oct 22 2013 at 19: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 Oct 22 2013 at 23:05

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

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

monolithed Oct 22 2013 at 23:21

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

alexanderzaytsev Oct 22 2013 at 23:36

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

monolithed Oct 23 2013 at 16:18

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

tenorok Oct 22 2013 at 12:18

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

monolithed Oct 22 2013 at 12:43

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

tenorok Oct 22 2013 at 12:49

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

monolithed Oct 22 2013 at 13:45

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

tenorok Oct 22 2013 at 14:04

Добавил issue.

monolithed Oct 22 2013 at 11:16

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

tenorok Oct 22 2013 at 11:49

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

monolithed Oct 22 2013 at 12:10

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

tenorok Oct 22 2013 at 12:12

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

monolithed Oct 22 2013 at 12:30

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

tenorok Oct 22 2013 at 12:52

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

monolithed Oct 22 2013 at 13: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 Oct 22 2013 at 13:46

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

funca Oct 22 2013 at 12:00

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

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

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

mursya Oct 22 2013 at 13:22

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

dizzoid Oct 22 2013 at 13: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

Show the best of all time