Каждый может написать CSS-код, даже если он сейчас работает в вашем проекте. Но может ли CSS быть лучше? Хотя на сайте webjx.com представлены различные методы в этой области, начните использовать эти пять аспектов, чтобы улучшить свой CSS, что позволит вам выглядеть более профессионально и улучшить ваш код!
1. Сброс
Прежде всего, позвольте мне сказать вам очень серьезно, что вам всегда придется сбрасывать определенные категории. Независимо от того, используете ли вы сброс Эрика Мейера, сброс YUI или пишете свой собственный код сброса, просто используйте его.
Он может легко удалить отступы и поля со всех элементов:
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, блочная цитата,
предварительно, форма, набор полей, таблица, й, тд {маржа: 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 { border-bottom: 1px Solid #dedede; размер шрифта: 18 пикселей; высота строки: 24 пикселя; положение: относительный;
Вы не можете сказать мне, что пример № 2 не может быстрее найти правильное свойство поля. Отсортируйте свойства элементов в алфавитном порядке. Последовательное создание CSS поможет вам сэкономить время на поиск конкретного свойства.
Я знаю, что некоторые люди организуют свой код так, а другие — иначе, но в моей компании мы приняли консенсусное решение, что весь код будет организован в алфавитном порядке. Такая организация кода определенно помогает работать с другими. Я съеживаюсь каждый раз, когда сталкиваюсь с каскадной таблицей стилей, свойства которой не отсортированы по алфавиту.
3. Организация
Таблицы стилей следует организовать так, чтобы связанный контент располагался близко друг к другу, чтобы было легче найти то, что вы ищете. Используйте более эффективные аннотации. В качестве примера я структурирую свою каскадную таблицу стилей:
/*****Reset*****/Удаляет отступы и поля элемента.
/*****Базовые элементы*****/Определите стиль базовых элементов: body, h1-h6, ul, ol, a, p и т.д.
/*****Общие классы*****/ Определите простые стили, такие как плавание с одной стороны, удаление нижнего поля элемента и т. д. Конечно, большинство из них не связаны с желаемой семантикой, но они Необходимо эффективно обрабатывать код.
/*****Базовый макет*****/Определение основных шаблонов: верхний, нижний колонтитул и т. д. Помогите определить основные элементы макета веб-страницы.
/*****Заголовок*****/Определить все элементы Hearder
/*****Содержимое*****/Определите все элементы в поле содержимого.
/*****Нижний колонтитул*****/Определить все элементы нижнего колонтитула
/*****Etc*****/Определите другие селекторы. Аннотируя и классифицируя похожие элементы по группам, вы быстрее найдете то, что вам нужно.
4. Последовательность
Независимо от того, как вы решите писать код, будьте последовательны. Я устал от всей этой дискуссии об однострочном и многострочном CSS. Нет необходимости спорить. У каждого есть свое мнение, поэтому выберите способ работы, который вам нравится, и будьте единообразны во всех таблицах стилей.
Лично я бы использовал комбинацию того и другого. Если селектор имеет более трех атрибутов, я обрезаю его и записываю в несколько строк.
div#header {поплавок: ширина: 100%;
div#header div.column {
правая граница: 1 пиксель сплошной #ccc;
плавать: вправо-вправо;
поле справа: 50 пикселей;
отступ: 10 пикселей;
ширина: 300 пикселей;
}
div#header h1 {поплавок: слева; позиция: относительная ширина: 250 пикселей;
Так что найдите способ работы, который вам нравится, и сохраняйте последовательность.
5. Начните с правильного места
Не пытайтесь приблизиться к вашей таблице стилей, пока язык разметки не будет завершен.
Когда я готовлюсь разделить веб-страницу, прежде чем создавать файл CSS, мне нужно просмотреть и пометить все документы между открывающим тегом тела и закрывающим тегом тела. Я не буду добавлять дополнительные DIV, идентификаторы или селекторы классов. Я собираюсь добавить некоторые общие DIV, такие как слушатель, контент, нижний колонтитул, потому что я знаю, что эти вещи существуют.
Сначала пометив документ, вы не столкнетесь с уже обреченными проблемами divities1 и class2! /*Вам нужно будет добавить эти элементы только после того, как вы начнете писать CSS и поймете, что вам понадобится еще один хук для этого! достигни того, чего пытаешься достичь.*/(Исходный текст не переведен).
Используйте дочерние селекторы CSS для указания дочерних элементов, а не просто механически добавляйте селектор класса или идентификатора к элементу. Помните: CSS бесполезен без хорошо отформатированного документа (или структуры разметки).
Подвести итог
Это может помочь мне лучше писать CSS-код. Но это не означает конец этого списка. Далее я приведу еще несколько, которыми вы можете поделиться. Пожалуйста, обратите внимание на webjx.com.