2012-03-15 2 views
2

Я кодирую .psd изображение до html. Но я смутился с лучшей практикой.
т.е. для укладки в achor как кнопка я использую следующий стиль атрибутыЛучшие практики для HTML/CSS

.button { 
padding: 10px; 
display: inline-block; 
text-decoration: none;   
    background-color: #3f4551; 
color: white; 
    background-image: url("../images/icons/icon_left.png") no-repeat 10px center; 
} 

теперь я могу использовать <a href="#" class="button"></a>, чтобы получить желаемый результат.
Однако у меня есть много якоря, которые имеют такое же стиль, как и раньше только с незначительными изменениями, как значка на правой стороне, а не оставил и различного цвета, градиент и т.д.. поэтому я решил разбить его в нескольких class т.е.

.button{ 
    padding: 10px; 

display: inline-block; 
text-decoration: none; 
background-repeat: no-repeat; 
} 
.icon_left{ 
    background-position: 10px center; 
} 
.color_blue{ 
     color:blue; 
    } 

теперь я могу использовать эти классы для стилизации т.е. <a href="#" class="button icon_left color_blue></a>" Но в этом случае разметка становится все более и более неуклюжим и weird.So я решил спросить, для которых это лучшая практика ??? СПАСИБО в Advance :)

+0

Лучшей практикой для кнопки является использование кнопки, а не ссылки. –

+0

@Truth: Почему вы так говорите? Они * являются * ссылками. Это точка CSS, решения UI - это еще одна тема. –

+0

Что вы подразумеваете под «.psd image to html» и как, если это вообще так, относится к вашему вопросу? –

ответ

6

Это хорошее начало, и вы идете в правильном направлении.

Некоторые дополнительные советы, хотя, учитывая передовой практики:

  1. Используйте описательные имена, которые явно не рассказывающие их значение. Например, не используйте color_blue как имя класса, потому что цвет может измениться, если вы измените свое приложение. Лучше имена, которые отражают цель этого элемента, например default-action, disabled или emphasized. Точно так же with-icon будет лучшим именем класса, чем icon_left. Имена - это семантика, а не визуальное представление.

  2. Используйте специальные селекторы, если применимо. Например, если классы кнопок используются элементами button, используйте селекторы, такие как button.emphasized. Это позволит вам повторно использовать это имя класса для других типов элементов (т. Е. div.emphasized), так что вам не нужно переименовывать их в .button-emphasized и .block-emphasized.

    Если вы знаете больше о структуре своего документа, вы можете даже отличить #content > button.emphasized и #sidebar > button.emphasized и использовать разные классы кнопок в зависимости от иерархии элементов.

  3. Использовать селекторное наследование, если применимо. Если класс разделяет одни и те же пары значений свойств между другими, которые отличаются, вы должны использовать наследование. Например, .emphasized для правил, которые применяются ко всем элементам, использующим этот класс, и button.emphasized & div.emphasized для определенных правил, которые могут перезаписывать более общий («родительский») селектор.

  4. Применить соглашения об именах. Обычно имена строчные, а знак минус предпочтительнее вместо подчеркивания. Поэтому with-icon лучше, чем with_icon. Вы также можете использовать прописные буквы так: withIcon. Лично я предпочитаю первую версию.

+0

Спасибо за ваше время, чтобы ответить на вопрос. Но когда-то я действительно застрял в соглашениях об именах. Например, C# говорит, чтобы назвать имя метода с помощью капитализации, html говорит использовать знак минус (-). – Vivek

+0

Каждый язык имеет свои собственные соглашения об именах. Не существует общепринятого соглашения. Может быть довольно дезориентирующим, если вы переключитесь с одного языка на другой. – Alp

+0

это может показаться непрофессиональным, но могу ли я спросить вас, могу ли я использовать такое же соглашение об именах по своему выбору, со всеми языками, которые я регулярно использую lyk C#, sql, java, но не в последнюю очередь HTML/CSS – Vivek

0

Если я правильно понимаю, то на правильном пути! Я знаю, что похоже, что ваш исходный код слишком набит, но так оно и работает. Помните, что классы используются для стилизации более одного элемента, а Id (если используется соответствующим образом) используются для стилирования одного объекта/элемента