Единственное свойство 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.

1. Сброс CSS невероятно полезен.

2. Через некоторое время вы изучаете различные ошибки (в основном в IE) и избегаете их.

3. CSSEdit на Mac больше связан с моими знаниями CSS, чем с чем-либо еще. Это просто и удивительно. Firebug обладает некоторой схожей способностью, но не такой крутой.

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

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

Единственный раз, когда это влияет на мой HTML, это когда мне нужно сделать некоторые эффекты javascript (например, выдвижные ящики и т. Д.) - и обычно это просто означает, что нужно обернуть вещи вокруг себя.

CSS zen - это МЕНЬШЕ CSS

• МЕНЬШЕ - это расширение CSS, которое позволяет повторно использовать и инкапсулировать значения (например, значения цвета), улучшает наследование, позволяет лучше вложить связанные свойства и операции.

Существует .NET Edition для LESS CSS.

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

1. Это потому, что многие из «техник» - это трюки или хаки, и

2. Что бы вы ни имели в виду под CSS-дзен, вы достигаете этого, отрабатывая свою задницу , 10000 часов работы, если быть точным, если верить Гладуэлл.

Побродить в css Zen Garden?
www.csszengarden.com

Понять базовую модель макета CSS.

Основной единицей является коробка . HTML-элементы уровня блока, такие как BODY, P, H n и т. Д., Соответствуют блоку в макете.

Поле имеет прямоугольную форму и по умолчанию расширяется по горизонтали до доступной ширины. Вертикально они сложены. В штучной упаковке может быть вложенным, например, P-box как минимум будет вложен в BODY-box.

Ящики могут иметь поля, границы и отступы, в соответствии с моделью ящика : 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. Если вы не запускаете страницу, для которой нужны эти идентификаторы для javascript, вы всегда должны начинать без классов и добавлять их позже.

Используйте селекторы-потомки, такие как p em { }, дочерние селекторы p > em { } и смежные селекторы p + em { }, для нацеливания на определенные элементы. Шаблоны в стилях ваших документов легко предсказать, и вам не нужно создавать классы «просто потому что». Хорошим трюком, который я использую, является правило element + * { } - оно применяет стили ко всему, что идет после определенного элемента, и изящно для очистки плавающих элементов.

Я предпочитаю объединить много общих правил в одно большое правило, например, если бы я хотел, чтобы группа различных элементов красного цвета, я использовал что-то вроде этого:

blockquote, a, h3 { color:red; }

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

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

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

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

Мастерство CSS не подразумевает знание конкретного трюка для конкретной ситуации (для этого нужен Интернет), а скорее умение придумать новый трюк для новой ситуации.

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

Некоторые полезные ресурсы для вас - это Учебное пособие / справочник по W3Schools CSS и, конечно, простой старый поиск в Google, чтобы найти все эти кросс-браузерные совместимости (или связанные с блочной моделью) хаки.

Я прочитал отличную презентацию под названием « Object-Oriented CSS », и мне хотелось бы прочитать ее до того, как я начал свой последний долгосрочный проект.

2 Основные принципы:

1. Отдельная структура и оболочка
2. Отдельный контейнер и содержимое

Презентация продолжается подробнее 10 лучших практик и 9 ловушек.

Объедините то, чему вас учит, с широким использованием плагина Google PageSpeed ​​для Firefox . Он скажет вам, какие CSS-селекторы могут быть более эффективными, и как сделать их более эффективными.

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

Мне кажется, что я использую «трюки, а не приемы» с Javascript. Хотя это также необходимо для любого динамического сайта, я чувствую себя грязно, когда собираю вместе набор функций, которые отправляют асинхронные запросы (в основном), потому что он просто выглядит круче:).