CSS выглядит как набор трюков для меня. Всякий раз, когда я читал о какой-то технике css, это выглядит гораздо больше похоже на трюки, связанные с техникой. Когда я пишу CSS, мне часто нужно адаптировать структуру html, и мне плохо.
У некоторых из вас было какое-то просветление и вы любите CSS zen? Как вы достигли дзэн CSS?
Прежде всего, отдельный контент и презентация полностью, и я имею в виду ПОЛНОСТЬЮ, поэтому... не более
<strong class="red">[...]</strong>(К сожалению, я вижу это слишком много) и все это.
классы css (и id) должны описывать контент, а не определять стиль. например, это вполне допустимо:
<div id="question">
<p>[...]</p>
</div>
<div id="answers">
<div class="answer">
<p>[...]</p>
<div class="comment"><p>[...]</p></div>
<div class="comment"><p>[...]</p></div>
</div>
<div class="answer">
<p>[...]</p>
</div>
</div>у вас достаточно классов тегов и id, чтобы что-то делать, но внутри него нет дивертита или логики представления.
помните... самое важное для достижения дзэн CSS - это очень хорошо сформированный HTML без получения дивертиста
Кроме того, если вы читаете о трюке CSS, он обычно не очень оптимизирован. Пример, который вы дали, вероятно, может быть более обобщенным и, наконец, работать с обычным кодированием. Однако тот, кто нашел эту версию, не преследовал ее дальше, так как нашел то, что ему нужно.
Последнее примечание - сначала создать контент для контента, а затем включить HTML для функций позже.
Единственное свойство CSS, которое изменило мое восприятие CSS, было display. На мой взгляд, свойство, которое заставляет вас понять, что CSS является языком для укладки не только HTML-документов, но и любых XML-документов (и, теоретически, любой иерархической структуры данных). Когда вы это поняли, гораздо больше вы можете сделать с языком.
Более конкретно: ничего не существует в элементе paragraph, который заставляет его отображаться на странице как блок. Так получилось, что таблица стилей по умолчанию большинства (если не всех) браузеров установила свойство display на нем block. Это могло быть также как inline или что-то совершенно безумное, как list-item. Когда вы убеждаетесь в том, что что-то присуще некоторым свойствам CSS, когда они применяются к определенным элементам HTML, вы открываете дверь для понимания CSS на другом уровне. Как бы это ни было непрактично, я считаю, что люди будут более внимательно изучать CSS, если браузеры не имеют таблицы стилей по умолчанию (или, более конкретно, если все элементы были инициализированы с одинаковыми значениями по умолчанию).
Это приводит меня к одному конкретному аспекту HTML/CSS, который был затронут ранее в этом потоке: следует ли использовать таблицы для разметки форм? Я считаю, что это не проблема, и я считаю, что дизайнеры, которые категорически отказываются от этого, все еще смотрят на HTML-разметку слишком презентационно, хотя их намерения противоположны. Позвольте мне объяснить:
Сначала рассмотрим элемент ul, используемый для представления списка неупорядоченных элементов. Традиционно этот список показан как вертикальный стек предметов, с пулями перед каждым. Однако в последние годы ul используется для обозначения вещей, таких как меню навигации, с элементами, выстроенными горизонтально и без пулей. Это связано с тем, что значение ul берется семантически, а не презентационно. Другими словами: не имеет значения, как в конечном итоге список предметов будет представлен визуально; если мы имеем дело с концепцией неупорядоченного списка, мы можем и должны использовать элемент ul для него. Что такое семантический HTML.
Теперь посмотрим на элемент table. Традиционно таблицы отображаются в виде набора строк и столбцов с заголовками выше и/или слева от данных таблицы. Однако, признавая цель свойства display, мы знаем, что это не обязательно так: если мы установим table и все его дочерние элементы в display: inline, это будет выглядеть как обычный беспорядок, и если мы будем использовать display: list-item для наших строк или ячеек, мы можем фактически иметь таблицу, более или менее похожую на неупорядоченный (или даже упорядоченный) список. Опять же, мы не пытаемся захватить традиционное визуальное представление таблицы; мы пытаемся захватить фактическую структуру данных, которую представляет таблица.
Какая структура данных наиболее подходит для элемента table? Если вы спросите меня, есть ответ: двумерный массив. Чтобы проиллюстрировать мою точку зрения, рассмотрим один из возможных способов представления двумерного массива в XML:
<parent-array>
<child-array-keys>
<key>Name</key>
<key>Age</key>
<key>Country</key>
</child-array-keys>
<child-arrays>
<array>
<value>Mike</value>
<value>35</value>
<value>England</value>
</array>
<array>
<value>Jakob</value>
<value>22</value>
<value>Sweden</value>
</array>
<array>
<value>Gerhardt</value>
<value>29</value>
<value>Germany</value>
</array>
</child-arrays>
</parent-array>
Не может ли такая структура данных быть представлена так же знакомо?:
<table>
<thead>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</thead>
<tbody>
<tr>
<td>Mike</td>
<td>35</td>
<td>England</td>
</tr>
<tr>
<td>Jakob</td>
<td>22</td>
<td>Sweden</td>
</tr>
<tr>
<td>Gerhardt</td>
<td>29</td>
<td>Germany</td>
</tr>
</tbody>
</table>
Имена элементов разные, но структура данных одинакова. Объедините это с тем фактом, что свойство display позволяет нам представлять любую иерархическую структуру данных по-разному, и, надеюсь, вы согласитесь со мной, что таблица не является таблицей, потому что она выглядит определенным образом, но поскольку он представляет определенную структуру данных.
В зависимости от сложности вашей формы он может или не может соответствовать критериям двумерного массива. Даже если это не так, следует отметить, что таблица может быть также использована для представления одного ассоциативного массива с элементом th в каждом tr, представляющем ключ, и элементом td, представляющим стоимость. В случае такой формы вы можете сказать, что список определений (dl) также может быть использован, и это правда. В этом конкретном случае, однако, я бы рассмотрел преимущества реализации и недостатки каждого решения:
dt и dd (в отличие от HTML 5 или XHTML 2, я забыл, какой из них). Однако использование таблицы позволяет именно это, при этом элемент tr явно группирует значения одного "массива" под общим элементом.
display: table и связанные с ним свойства CSS-кросс-браузер в списке определений, заставляя использовать плавающие методы, которые по своей природе более ограничены, если вы хотите, чтобы ваша форма была выложена в виде традиционной таблицы, Разумеется, таблицы имеют эту функциональность по умолчанию, используя каждую стандартную таблицу стилей по умолчанию, и могут иметь совершенно разные значения display, назначенные им, если это необходимо.Надеюсь, я не раздувал ваш вопрос без необходимости размышлениями об использовании таблиц HTML в сочетании с CSS; Я просто почувствовал, что необходимо сделать вывод о концепциях CSS.
Сброс CSS невероятно полезен.
Через некоторое время вы узнаете разные ошибки (в основном в IE) и избегайте их.
CSSEdit на mac больше связан с моими знаниями CSS, чем с чем-либо еще. Это просто и удивительно. Firebug имеет некоторую аналогичную способность здесь, но не так уж и крут.
Большинство моих работ работает во всех основных браузерах с самого начала, хотя я развивается в webkit. Это происходит только от выполнения много-много-много-много-много CSS.
CSS должен стать моей любимой частью разработки. Я бы не стал считать это "сумкой трюков". Это хорошо продуманный язык с возможностью делать практически любой макет.
Единственный раз, когда это влияет на мой HTML, - это когда мне нужно делать некоторые эффекты javascript (например, выдвижные ящики и т.д.) - и обычно это просто означает положить оболочку вокруг вещей.
CSS zen LESS CSS
Существует .NET Edition для LESS CSS.
начать повторное использование классов и укладку классов по элементам, а также ознакомиться с правилами специфики, чтобы вы могли переопределить некоторые стили по мере необходимости, вы увидите действительно быстро, где это действительно полезно и больше, чем просто "трюки".
Это потому, что многие "приемы" - это трюки или хаки и
Независимо от того, что вы подразумеваете под CSS zen, вы достигаете его, отрывая свою задницу. 10000 часов работы, если быть точным, если верить Гладуэлл.
Повесьте в css Zen Garden?
www.csszengarden.com
Понять основную модель макета CSS.
Базовая единица поле. Блочные HTML-элементы типа BODY, P, Hn и т.д. Соответствуют блоку в макете.
Коробка прямоугольная и по умолчанию расширяется по горизонтали до доступной ширины. Вертикально они сложены. Вставка может быть вложенной, например. P-box будет, по меньшей мере, вложенным в поле BODY.
Коробки могут иметь поля, границы и отступы, в соответствии с модель окна: http://www.timofejew.ca/2006/css-box-model-hierarchy/
Итак, у вас есть вертикальный стек (или столбец) вложенных ящиков. Если вы хотите, чтобы некоторые ящики перемещались за пределы основного столбца, например. как боковая панель, вы плаваете (float: left|right) и перемещаетесь в левый или правый край содержащего блока, а основной стек обтекает.
Если вы хотите, чтобы поля были выложены горизонтально (а не вертикально), вы используете display:inline-block.
Если вам нужна сетка, в которой края ячеек выровнены в двух измерениях, вы используете display:table. Но поскольку IE до версии 8 не поддерживает это, вы можете выбрать "обмануть" и использовать таблицы разметки HTML для создания сетки.
Если вы хотите поместить ящик, полностью независимый от потока ящиков, вы используете абсолютное позиционирование, которое поместит блок точно там, где вы хотите, возможно, перекрывая другой контент.
Дорога к просветлению приходит, когда вы понимаете, что CSS отлично подходит для стилизации элементов, но ужасно для определения макета. Так просто, за исключением того, что для сложного, кросс-браузерные макеты, вы никогда не придумаете решение, которое так же аккуратно и приятно, как вы надеетесь. О, и кроме откровения, что IE6 был помещен на эту Землю в качестве средства проверки вашего терпения на точку привязки, также поможет!
Помните, что что-либо вы можете заменить и что ваш сайт должен быть адаптирован для изменения.
Содержание - это король. Веб-сайты не отличаются от книг тем, что они форматируют текст таким образом, который приятен визуально для читателя, но если вы удалите оболочку, сайт все равно будет течь, как и документ.
Лучший способ узнать, что у вас все получилось, - это когда вы удалили все CSS - таким образом вы можете получить голые кости вашей информационной иерархии, и если все выглядит так, как будто все имеет одинаковый вес, это было сделано неправильно.
Используя HTML-элементы для их семантического значения, вы делаете больше, чем уменьшаете количество используемых вами div, вы создаете значение для своего документа. Поисковые системы придают больший вес страницам, у которых есть термин поиска в заголовке, чем в телеобъекте. Считыватели экрана делают упор на заголовки, а не потому, что они появляются больше, но потому, что вы придаете им приоритет в документе.
<div class="heading">What I ate for breakfast</div>
<div class="paragraph">Cereal, orange juice, toast.</div>
Несмотря на то, что это работает с точки зрения представления, оно имеет гораздо меньшее значение, чем это:
<h1>What I ate for breakfast</h1>
<p>Cereal, orange juice, toast.</p>
Будучи еще более строгим, вы можете сломать то, что я съел на завтрак в неупорядоченный список, но это можно считать излишним для этого короткого примера. Дело в том, что, используя HTML в качестве описания вашего контента, вы приносите пользу всем - сами для лучшего ранжирования поиска и своих читателей, используя альтернативные методы для отображения страницы.
Дизайн для Интернета, конечно, не предназначен для печати. Вам нужно, чтобы ваш сайт выглядел хорошо для ваших читателей, на любой платформе, которую они решили использовать - Mac OS X, Windows, Linux, iPhone, mobile и т.д. До появления iPhone появились мобильные браузеры. Большинство из них по-прежнему делают, и в этих случаях, как только вы написали семантически правильную разметку, вы сможете соответствующим образом переделать сайт - ведь CSS включает поддержку многих различных носителей, включая, помимо прочего, экран компьютера, проектор, мобильный, печатный, устройство чтения с экрана и т.д.
Не все компьютеры одинаковые - цвета могут быть разными, шрифты могут быть разными, эй, они могут использовать IE6. Никогда не заставляйте пользователя чувствовать, что браузер, который у них есть, неадекватен всплывающими сообщениями, в которых говорится: "Ваш браузер устарел". Вместо этого адаптируйте. Включите широкомасштабные семейства шрифтов, которые охватывают самые последние и самые большие шрифты, смешанные с наиболее часто используемыми ниже по дереву. Расширьте свой сайт постепенно, чтобы у вас был отличный дизайн в IE, и сделайте его еще лучше для тех пользователей Safari/Firefox, которые используют многоколоночные CSS3 или несколько фоновых изображений.
В-третьих, я просто хочу затронуть лучшие практики CSS. Ошибочно думать, что вам нужно дать все идентификатор и класс в вашем HTML. Если вы не запускаете страницу, для которой нужны эти ID для javascript, вы всегда должны начинать без классов и добавлять их позже.
Используйте селектора-потомки, такие как p em { }, дочерние селекторы p > em { } и смежные селекторы p + em { } для целевых элементов. Легко предсказать шаблоны в том, как ваши документы оформлены, и вам не нужно создавать классы "только потому, что". Хорошим трюком, который я использую, является правило element + * { } - оно применяет стили к чему-либо, что приходит после определенного элемента, и оно отлично подходит для очистки плавающих элементов.
Я предпочитаю объединять многие общие правила в одно большое правило, например, если бы я хотел, чтобы куча разных элементов была красной, я бы использовал что-то вроде этого:
blockquote, a, h3 { color:red; }
Это намного лучше, чем дать каждому из этих элементов класс, и, конечно же, вы можете всегда переопределять стили позже. Это настоящая красота css, что любое общее правило может быть отменено с определенным позже.
Это оказалось немного дольше, чем я планировал. Подводя итог - напишите отличный HTML, который не нуждается в div (если вам не нужно обходиться в обходных методах), планируйте свой дизайн как кросс-браузер, имея в виду все различия для каждого пользователя и минимальный код. Там много других селекторов, и я только затронул несколько здесь - дело в том, чтобы кодировать без классов, если вам действительно не нужно.
Я не совсем уверен, что понимаю, что вы имеете в виду, однако большая часть моего HTML-кода в значительной степени продиктована моим CSS. Вероятно, это не лучший способ сделать это, но я стараюсь и не использую никаких таблиц вообще, а div - как можно чаще и чаще. От макета до внешнего вида, а также везде, где я могу применить CSS.
Я думаю, что CSS - отличный инструмент и больше, чем просто трюки. Это еще один способ взглянуть на вещи.
Чем больше вы используете CSS, тем лучше вы получите - все, что на самом деле есть. Вы можете читать методы CSS каждый день, но вы ничего не помните, пока не используете его.
Мастерство CSS не предполагает знания конкретного трюка для конкретной ситуации (что для чего предназначен интернет), а скорее для того, чтобы придумать новый трюк для новой ситуации.
Как уже упоминалось в других сообщениях - мастерство CSS идет с практикой (для нескольких проектов с небольшим размером должно быть достаточно, чтобы вы продвинулись на продвинутый уровень и лучше поняли "рамки" (цитируется, потому что я не исследовал, если есть любые HTML-структуры, но это лучшее слово, которое я могу описать, чтобы описать разделение контента и стиля HTML/CSS), используемые текущими разработчиками).
Некоторые полезные ресурсы для вас - это W3Schools CSS Tutorial/Reference и, конечно, простой старый поиск Google, чтобы найти все эти кросс-браузерная совместимость (или связанные с коробкой) хаки.
Я прочитал превосходную презентацию под названием " Object-Oriented CSS", и мне жаль, что я не прочитал ее до того, как начал свой последний длинный -термический проект.
2 Основные принципы:
В презентации представлены подробные сведения о 10 лучших практиках и 9 ошибках.
Объедините то, чему он учит вас, с широким использованием плагина Google PageSpeed для Firefox. Он расскажет вам, какие селектора CSS могут быть более эффективными и как сделать их более эффективными.
Я нахожу CSS невероятно полезным для повторного использования и организации моего макета и кода. Я не могу представить себе разработку сайта, не используя приличное количество CSS, и поскольку это относительно прямой язык, легко сделать быстрые изменения в наборе элементов без необходимости выкапывать тысячи строк кода. Может быть, я просто наивна, но мне нравится CSS.
Мне кажется, что я использую "трюки, а не текуники" с Javascript. Хотя это также необходимо для любого динамического сайта, из-за этого я чувствую себя грязным, чтобы взломать множество функций, которые отправляют асинхронные запросы (в основном), потому что они просто выглядят более холодными:).