Соглашения об именах для html / css + MVC?

Question

Есть ли какие-нибудь хорошие статьи по именованию всеобъемлющих соглашений об именах?

Я ищу, чтобы очистить некоторый код ... все, от ресурсов до моделей (Codeigniter), HTML и CSS.

Мне также любопытно, как структурировать CSS ... лучше ли дать всем уникальный класс, например search-bar-icon, или лучше повторять такие классы, как .search span.icon {?

Спасибо, Уокер

Answer 1

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

Answer 2

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

Answer 3

Помните, что вы можете складывать и наследовать классы CSS следующим образом:

.icon { background: left center no-repeat; padding-left: 20px; /* leave space for icon */
#SearchBar .icon { background-image: url(../images/icons/search.png); }

Хорошая методика, которую я использовал ранее, это установка нескольких классов CSS (в данном случае, для отображения журнала аудита):

/* the icon is displayed by each entry; if it has no other class,
   it will show a "generic" icon */
.log .entry {
    padding-left: 20px; /* leave space for icon */
    background: url(../images/icons/log-generic.png) top left no-repeat;
}

/* slot a generic delete icon in */
.log .icon.delete {
    color: red;
    background-image: url(../images/icons/log-delete.png);
}

.log .icon.delete.person {
    background-image: url(../images/icons/log-delete-person.png);
}

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

Мне немного странно называть имена в CSS, но я придерживаюсь соглашения, что UpperCase для идентификаторов, а lowerCamel для классов. Это просто помогает мне дифференцироваться.

Я придерживаюсь дзен CSS-именования:

• Чем меньше идентификаторов, тем лучше
• Идентификаторы должны быть зарезервированы для основных разделов макета
• ... и для идентификации элементов для операций DOM / AJAX
• Использовать общие имена классов (журнал, значок, человек, кнопка и т. Д.)
• ... затем объедините их с идентификаторами или родительскими классами для формирования специфики, например, #Header a.icon.person для ссылки на профиль в шапке

Самое главное, сохранить его стройным . Чем меньше CSS, тем лучше - используйте общие, многократно используемые стили, и вы получите выгоду от а) согласованности в вашем пользовательском интерфейсе и б) от меньшего количества страниц.

НТН

Answer 4

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

Например, имя файла контроллера в нижнем регистре, но имя класса пишется с большой буквы и должно соответствовать имени файла. Например. В результате test.php создаст класс с именем Test.

Имена классов / идентификаторов HTML - это то, что не стандартизировано и полностью зависит от того, что вы считаете лучшим. Я обычно пытаюсь дать своим идентификаторам и классам имя, которое имеет смысл. Например, DIV, содержащий логотип, будет называться «site_logo». DIV, содержащий статью в блоге, будет называться «article» и т. Д.

Кроме того, не позволяйте целым "идентификаторам / классам медленнее" обмануть вас, так как увеличение скорости очень мало. Если вы хотите оптимизировать свой веб-сайт, вам лучше оптимизировать код PHP или CSS, чем удалять HTML-идентификаторы или классы.

Answer 5

Предоставление буквально всем уникального класса в вашем CSS побеждает назначение «каскадных» таблиц стилей.Эффективный CSS использует каскад так, что вы повторяете как можно меньше усилий по стилизации.

Помните, что большинство элементов HTML могут быть стилизованы напрямую.Мне не нужно использовать <span class="something"><label>..., потому что я могу стилизовать сам ярлык без использования диапазона.Большинство людей используют гораздо больше div и span, чем им действительно нужно.

Вы также можете стиль путем вывода.Например, я мог бы иметьсопровождаемый UL результатов поиска, которые я хочу уникально стилизовать из других UL на странице.Вместо того, чтобы дать UL определенный класс (скажем, «searchResultsList»), я мог бы просто использовать следующее правило:

H3.searchResults + ul {some styling...;} или H3.searchResults + div > * {some styling...;}

Что касается организации CSS, яЯ считаю полезным упорядочить мои файлы по категориям элементов, начиная с самых простых и вездесущих случаев, таких как a, p и т. д., а затем обрабатывать более сложные элементы, такие как таблицы.Я группирую все по специфике, потому что это часть каскадных правил.Элемент обрабатывается сначала в порядке его появления в файле, а затем в зависимости от того, насколько конкретно правило влияет на него.Я размещаю все мои классы с одним экземпляром и служебные классы последними (.iconWhichAppearsOnceEver, .noBordersTable и т. Д.)

body{}
a {}
p {}
h1,h2,h3,h4,h5,h6 {}
h3.searchResults {}
...
table {}
thead {}
thead th {}
thead th a {}
thead th.noFill a {}
...

Answer 6

Предоставление каждой вещи уникального идентификатора делает ваши селекторы самыми быстрыми, но раздувает вашу разметку и может стать тряпкой для работы.Использование уникальных классов не имеет смысла (классы используются для групп объектов).

Ваш второй вариант - более чистый код, но селекторы обычно значительно медленнее.