1. Сброс
Прежде всего, позвольте мне сказать вам очень серьезно, что вам всегда придется сбрасывать определенные категории. Независимо от того, используете ли вы сброс Эрика Мейера, сброс YUI или пишете свой собственный код сброса, просто используйте его.
Он может легко удалить отступы и поля со всех элементов:
| html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td {margin: 0; дополнение: 0; |
Eric Meyer Reset и YUI Reset очень мощные инструменты, но для меня они заходят слишком далеко. Я думаю, вам в конечном итоге придется все сбросить, а затем переопределить свойства всех элементов. Вот почему Эрик Мейер рекомендует более эффективное использование (сброс таблицы стилей), и вы не просто используете его таблицу стилей сброса, а перетаскиваете ее в свой проект. Настройте ее (таблицу стилей сброса) и создайте собственную таблицу стилей сброса.
О, пожалуйста, прекратите использовать:
| * {маржа: 0; заполнение: 0; |
Потратьте больше времени на эту работу, и что, по вашему мнению, произойдет с переключателями, когда вы удалите отступы? Элементы формы иногда могут делать странные вещи, поэтому наиболее эффективный способ — сделать их независимыми.
2. Сортировка
небольшой тест
Этот пример призван заставить вас задуматься о том, как быстрее найти правильный атрибут поля?
Пример №1
| div#header h1 { z-индекс: 101; цвет: #000; положение: относительное; высота строки: 24 пикселей; поле справа: 48 пикселей; нижняя граница: 1 пиксель сплошной #dedede; размер шрифта: 18 пикселей; } |
Пример №2
| div#header h1 { нижняя граница: 1 пиксель сплошной #dedede; цвет: #000; размер шрифта: 18 пикселей; высота строки: 24 пикселей; поле справа: 48 пикселей; положение: относительное; z-индекс: 101; } |
Вы не можете сказать мне, что пример № 2 не может быстрее найти правильное свойство поля. Отсортируйте свойства элементов в алфавитном порядке. Последовательное создание CSS поможет вам сэкономить время на поиск конкретного свойства.
Я знаю, что некоторые люди организуют свой код так, а другие — иначе, но в моей компании мы приняли консенсусное решение, что весь код будет организован в алфавитном порядке. Такая организация кода определенно помогает работать с другими. Я съеживаюсь каждый раз, когда сталкиваюсь с каскадной таблицей стилей, свойства которой не отсортированы по алфавиту.
3.Организация
Таблицы стилей следует организовать так, чтобы связанный контент располагался близко друг к другу, чтобы было легче найти то, что вы ищете. Используйте более эффективные аннотации. Например, вот как я структурирую свою каскадную таблицу стилей:
| /*****Перезагрузить*****/ Удалить отступы и поля из элемента. /*****Основные элементы*****/ Определите стили для основных элементов: body, h1-h6, ul, ol, a, p и т. д. /*****Общие классы*****/ Определение простых стилей, таких как плавание одной стороны, удаление нижнего поля элемента и т. д. Конечно, большинство из них не связаны с желаемой семантикой, но они необходимы для эффективной обработки кода. /*****Базовый макет*****/ Определите основные шаблоны: верхний колонтитул, нижний колонтитул и т. д. Помогите определить основные элементы макета веб-страницы. /*****Заголовок*****/ Определите все элементы Hearder /*****Содержание*****/ Определите все элементы в поле содержимого /*****Нижний колонтитул*****/ Определите все элементы нижнего колонтитула /*****И т. д*****/ Определите другие селекторы. Аннотируя и классифицируя похожие элементы по группам, вы быстрее найдете то, что вам нужно. |
4. Последовательность
Независимо от того, как вы решите писать код, будьте последовательны. Я устал от всей этой дискуссии об однострочном и многострочном CSS. Нет необходимости спорить. У каждого есть свое мнение, поэтому выберите способ работы, который вам нравится, и будьте единообразны во всех таблицах стилей.
Лично я бы использовал комбинацию того и другого. Если селектор имеет более трех атрибутов, я обрезаю его и записываю в несколько строк.
| div#header {поплавок: ширина: 100%; div#header div.column { правая граница: 1 пиксель сплошной #ccc; плавать: вправо-вправо; поле справа: 50 пикселей; отступ: 10 пикселей; ширина: 300 пикселей; } div#header h1 {поплавок: слева; позиция: относительная ширина: 250 пикселей; |
Так что найдите, как вам нравится работать, и сохраняйте последовательность.
5. Начните с правильного места
Не пытайтесь приблизиться к своей таблице стилей, пока не закончите работу с языком разметки.
Когда я готовлюсь к разделению веб-страницы, перед созданием файла CSS мне нужно просмотреть и пометить все документы между открывающим тегом тела и закрывающим тегом тела. Я не буду добавлять дополнительные DIV, идентификаторы или селекторы классов. Я собираюсь добавить некоторые общие DIV, такие как слушатель, контент, нижний колонтитул, потому что я знаю, что эти вещи существуют.
Поставив тег первым в документе, вы не столкнетесь с уже обреченными проблемами разделов1 и классов2!
/*Вам нужно будет добавить эти элементы только после того, как вы начнете писать CSS и поймете, что вам понадобится еще один крючок для достижения того, чего вы пытаетесь достичь.*/(Исходный текст не переведен).
Используйте дочерние селекторы CSS для указания дочерних элементов, а не просто механически добавляйте селектор класса или идентификатора к элементу. Помните: CSS бесполезен без хорошо отформатированного документа (или структуры разметки).