лучший способ писать CSS

Question

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

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

.div1,.div2,.div3{min-height:335px;} 

и использовать HTML как это:

<div class="div1">afads</div> 
<div class="div2">fads</div> 
<div class="div3">fads</div> 

или я должен сделать это следующим образом: CSS:

.minheightstyle{min-height:225px;} 
.leftitems{float:left;} 
.red{background-color:red;} 
.blue{background-color:blue;} 
.grey{background-color:grey;} 

HTML:

<div class="minheightstyle leftitems red">my text in red bg</div> 
<div class="minheightstyle leftitems blue">my text in blue bg</div> 
<div class="minheightstyle leftitems grey">my text in grey bg</div> 

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

Answer 1

.text {in-height:225px; float:left;} 
.red{background-color:red;} 
.blue{background-color:blue;} 
.grey{background-color:grey;} 

<div class="text red">my text in red bg</div> 
<div class="text blue">my text in blue bg</div> 
<div class="text grey">my text in grey bg</div> 

Answer 2

Я не хотел бы этого делать. Я бы не стал первым, потому что это классы, если элементы имеют одинаковые стили.

Я бы не стал последним, потому что это побеждает цель стилей, если вы собираетесь создавать пользовательские классы для каждого элемента стиля. Учитывайте следующее:

<div class="font-size color margin text padding float-left">some div</div> 

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

Я бы предпочел создать общий класс, например. article с дизайном статьи вместо того, чтобы говорить class="font-verdana margin color" и т. Д. Возможно, для цвета у вас может быть точка, потому что вы хотите использовать разные цвета для трех div, но в целом эти три div s должны иметь один и тот же класс.

Answer 3

Технически это не имеет значения, поскольку оба будут работать одинаково.

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

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

<div id="header">XXX</div> 

#header { 
    background-color: red; 
    color: #000; 
} 

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

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

.parent > div { 
    min-height:335px; 
} 

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

Одна вещь, которую я всегда иметь в виду при написании кода является «Если я передать это другому разработчику, они были бы в состоянии понять, что происходит с первого взгляда?»

В случае другого разработчик добавляет или меняет ваш код , им намного проще редактировать свой CSS, чем редактировать HTML, что особенно верно, если они используют CMS или что-то, что распространяется на разные файлы шаблонов. По этой причине, если вы начнете добавлять red и leftitems в HTML, разработчик должен будет перезаписать текущие правила, если они решат, что они не хотят, чтобы какой-либо элемент был красным или выровнен по левому краю, что может быстро запутаться.

Для всех продвинутых пользователей, читающих это, я бы рекомендовал использовать SCSS, а не CSS, как это может сделать некоторые из выше намного проще, так как она позволяет вложенности и переменные внутри вашего CSS - http://sass-lang.com/

Надежда, что помогает !!

Answer 4

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

.red { 
    color: blue; 
} 

Это не имеет смысла, а на самом деле делает стиль гораздо сложнее.

Answer 5

если все DIV должны иметь один и тот же стиль CSS просто использовать один класс и дать его всем своим DIV, если не нужно использовать несколько класс для каждого DIV:

<div class="divv">afads</div> 
<div class="divv">fads</div> 
<div class="divv">fads</div>r code here 

.divv {мин-высота: 335px;}

Answer 6

Прежде всего, не помещайте свои классы CSS, используя имена, предлагающие визуальное намерение, например «minheightstyle». Часть идеи CSS состоит в том, чтобы разделить контент и стиль, доказанное преимущество, которое вы пытаетесь сделать недействительным с именами классов, которые вы показываете. Итак, это ваше первое эмпирическое правило - если вы хотите пометить элемент, вы не помечаете его просто для стилизации, вы помещаете его в подсказку о том, как этот элемент отличается от других по отношению к его контенту. Например, с тремя div с, если все так, то это должно быть возможным, чтобы выбрать их, как дети своих родителей, например:

#parent > div { 
    min-height: 300px; 
} 

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

#selected { 
    min-height: 300px; } 

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

И, во-вторых, вы должны помнить, что правила, которые вы пишете, применяются браузером рабски - то есть элементы, которые в конечном итоге переопределяются вами с вашими таблицами стилей, должны в соответствии с спецификацией CSS иметь свой стиль, пересчитанный из того, что он был. То есть, если вы (например) решить, чтобы переопределить стиль всех элементов со следующим селектором:

* { 
    margin: 0; padding: 0; } 

..because вы решили, что вы устали от мелких несоответствий между браузерами применяя свои маленькие поля и paddings здесь и там, и вы хотите, чтобы стальной контроль полей и прокладок на ваших страницах, то вы должны знать, что браузер свяжет правило выше (либо сразу же отрисует стиль, либо там, или отложив его позже) до каждый элемент у вас есть. Зная это, вы должны понять, лучше ли применять правило выше к некоторым элементам. Те же рассуждения обычно применяются для фоновых изображений - лучше ли применять цвет фона для детей элемента или просто к самому элементу (результат часто неотличим визуально)?

<div id="menu"> 
     <div>Apples</div> 
     <div>Oranges</div> 
     <div>Bananas</div> 
</div> 

#menu > div { 
     background-color: brown; 
} 

или

#menu { 
     background-color: brown; 
} 

Как к вашей насущной проблеме, хорошее эмпирическое правило заключается в минимизации коды, включая и разметку и стиль. Избавьтесь от одинаковых имен классов для детей, CSS вполне способна выбрать их без имен классов:

<div id="foo"> 
    <div>my text in red bg</div> 
    <div>my text in blue bg</div> 
    <div>my text in grey bg</div> 
</div> 

#foo > div 
{ 
    min-height: 300px; 
    float: left; 
} 

#foo > div:nth-child(1) 
{ 
    color: red; 
} 

#foo > div:nth-child(2) 
{ 
    color: green; 
} 

#foo > div:nth-child(3) 
{ 
    color: blue; 
} 

Конечно, есть и другие способы, чтобы выбрать вещи выше, а просто попытаться применить знание того, как CSS действительно работает. Абстракция от деталей - это хорошо, но для оптимизации требуется знание указанных деталей. Старайтесь не рассуждать о стиле при разработке вашей разметки - наберите его так, как если бы автор (ваш) стиль всегда был отключен или набирал его элементы тегов с учетом содержания. Затем примените CSS, просмотрите (часто нужны «обертки», но в настоящее время это жизнь веб-разработчиков), и повторите. Но постарайтесь сохранить содержание и стиль отдельно - изменение должно иметь минимальное влияние на другое.