CSS-классы и виджеты: три вопроса

Question

Я написал довольно сложный виджет, который использует OnDemandList для создания виджета, который позволяет полностью редактировать (включая добавление) хранилища.

Теперь ... Я не совсем гуру CSS (совсем наоборот), и мне бы понравилось руководство, просто чтобы проверить, что я делаю вещи полусмысленно.

Когда я создаю редактор в моем виджете, я:

buildRendering: function(){ 
    // ... 
    this.domNode = put('div'); 
    // ... 
}, 

postCreate: function(){ 
    // ... 
    // This is here, because if I set the class in buildRendering, it gets zapped by className (the widget's declaration) 
    put(this.domNode, '.editable-list'); 
    // ... 
}, 

Затем, когда редактор добавляется динамически:

put(row.element, editingWidget.domNode); 
    put(editingWidget.domNode, '.editable-list-row-editor'); 

Я также необходимость, чтобы убедиться, что каждая строка имеет положение: абсолютное, чтобы редактор попадал в нужное место:

domStyle.set(row.element, 'position', 'relative'); 

В CSS, у меня есть:

.editable-list-row-editor { 
    position: absolute; 
    top: 0; 
    z-index: 20; 
} 

Вопросы:

1) Можно ли с точки зрения наилучшей практики, даже добавить стиль, как я сделал с domStyle.set(row.element, 'position', 'relative'); ...? Или я сделаю это с помощью CSS? Я сделал это программно, потому что это действительно важно, что это relative.

2) Все в порядке с CSS, чтобы оставить вещи как можно более неспецифическими? Идея заключается в том, что пользователи могут (и, вероятно, будут) писать свои собственные CSS, и переопределять вещи, написав более конкретные правила ... правильно? Или, может быть, я должен был бы написать:

.editable-list .editable-list-row-editor { 
    position: absolute; 
    top: 0; 
    z-index: 20; 
} 

Или лучше:

.editable-list .row-editor { 
    position: absolute; 
    top: 0; 
    z-index: 20; 
} 

...?

3) Из того, что я вижу, классы CSS для виджетов должны быть установлены в postCreate, а не buildRendering, иначе Dojo, кажется, использует className для зап ничего, что был установлен там ... это то, что вы обычно делаете с виджет, создающий собственный domNode?

Answer 1

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

Конечно, встроенный CSS всегда является наиболее конкретным (самый важный), поэтому, если вы действительно хотите что-то принудить, вы можете добавить !important в свое правило CSS, которое я бы рекомендовал использовать не так много.

---

Вы должны написать CSS как можно конкретнее, потому что вы не хотите мешать другим виджетам/HTML, но вы не хотите, наоборот, а также (внешний CSS мешая виджета). Но, конечно, вы можете писать вещи, как:

.editable-list .row-editor { 
    position: absolute; 
    top: 0; 
    z-index: 20; 
} 

Это в основном зависит от того, что на самом деле означает .row-editor.Если это что-то «глобальное», вы можете сохранить .row-editor, просто потому, что он позволит вам определить глобальный .row-editor, который содержит общий CSS, в то время как ваш .editable-list .row-editor будет содержать определенные правила CSS для этого виджета.

Например, давайте рассмотрим, что у вас есть еще один виджет с подобным CSS:

.other-widget .row-editor { 
    position: absolute; 
    top: 0; 
    z-index: 25; 
} 

Тогда вы могли бы также написать следующий CSS:

.row-editor { 
    position: absolute; 
    top: 0; 
} 

.editable-list .row-editor { 
    z-index: 20; 
} 

.other-widget .row-editor { 
    z-index: 25; 
} 

Но это на самом деле зависит от того, как вы видите класс .row-editor, если вы считаете, что это зависит только от вашего редактируемого списка, то вы также можете рассмотреть его префикс. Это похоже на то, что Dojo уже делает, Dojo имеет глобальные классы CSS, такие как .dijitInline, но также и специальные классы CSS, такие как .dijitCalendarDateLabel.

---

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

.editable-list .row-editor { 
    position: absolute; 
    top: 0; 
    z-index: 20; 
} 

Потом кто-то, кто хочет изменить CSS просто добавляет тег к родителю (например <body> тега):

<body class="myTheme"> 
    <!-- Your HTML --> 
</body> 

И затем задает следующий CSS:

.myTheme .editable-list .row-editor { 
    z-index: 30; 
} 

Это фактически переопределить z-index. Доджо уже использует этот принцип со своими темами. Если вы хотите использовать определенную тему, добавьте тему CSS и добавить название темы как имя класса в вашем теле, например:

<body class="claro"> 
    <!-- Your HTML --> 
</body> 

Конечно вам не нужно определить его в теле -level, если это родительский узел вашего виджета, он будет работать.

---

О проблеме о buildRendering против postCreate, ну, я полагаю, что вы используете dijit/_TemplatedMixin подмешать. Если это так, тогда, если вы посмотрите на code и ищите buildRendering, вы увидите, что это делает вещи. Это означает, что если вы напишете свой собственный buildRendering, вы фактически замените свой код своим. Если вы хотите, чтобы убедиться, что Dojo выполняет свою собственную логику первого, вы должны написать что-то вроде:

buildRendering: function() { 
    this.inherited(arguments); 
    /** Your code */ 
} 

Это дополнительная строка кода будет фактически вызвать тот же самый метод унаследованных модулей/Mixins. Вы можете сделать с этой линией то, что вы хотите, если вы не хотите, чтобы наследуемые модули вызывались, вы ее не оставляете (возможно, также ее ломаете), если вы хотите выполнить ее как последний шаг, вы просто переключаете this.inherited(arguments); на ваш последний шаг в функции buildRendering (но тогда он может переопределить ваши изменения).

---

Но в конце концов, это всего лишь мнение, и я уверен, что есть и другие мнения, которые там тоже правильно (для других или даже подобных случаев использования). Но я могу сказать вам, что Dojo делает вещи аналогичным образом для своих собственных виджетов, поэтому, возможно, это не плохой подход, чтобы следовать ему.

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