Каков наилучший способ использования CSS? (НЕ * научиться * но действительно * использовать *)

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

Например, некоторые люди, которых я уважаю, говорят мне, что использование css reset не является необходимым, в то время как другие живут для него. Кроме того, существует так много отличной рамки css (для гридов и т.д.), Которые даже думали, что я их понимаю, я никогда не знаю, когда их использовать.

Итак, в основном, мой вопрос: как только вы понимаете, как работает CSS, есть ли признанный "лучший" подход, используемый отличным веб-разработчиком? Как и в python, нужно попытаться использовать общий шаблон и прочитать PEP 8. Или, на С++, после понимания синтаксиса, чтение эффективной серии Meyer - отличное "второе" чтение.

Извините за то, что так долго объяснял. Я просто не хотел отвечать: прочитайте "Начало CSS", в котором объясняется, как изменить фон или как установить шрифт. Я действительно ищу хороший стандартный подход.

  • Должны ли мы использовать reset?
  • Должны ли мы использовать только один файл на сайт? Один для главной страницы и один для остальных? Один базовый файл и один раз для каждого большого раздела?
  • Неправильно ли иметь 2k + css файлы? Означает ли это, что он должен был быть реорганизован и что он содержит много дубликатов?
  • Должен ли я определять родительский элемент в верхней части для нормального шрифта, цвета, h1 и т.д., а затем, когда он меняет его на разделы.. или вместо этого всегда использовать стандартный и переопределять каждый раздел.
  • Должен ли я использовать .class и #id немного повсюду, или я должен попытаться свести их к минимуму и вместо этого использовать длинный дескриптор, например:

  .content .main tr td span a 
  or
  span.classname a

Спасибо!

ТЛ/дг:

Какая лучшая "секунда" читается после того, как вы уже понимаете CSS, но хотите использовать ее чистым/профессиональным способом?

[EDIT]

Спасибо всем за ваш ответ. Я знаю, что задал довольно много вопросов... но они были только примерами для настоящего вопроса: "Какая лучшая" вторая "прочитана, как только вы уже понимаете CSS, но хотели бы использовать ее чистым/профессиональным способом. Я надеялся прочитать книгу, объясняющую примеры, которые я предлагал... но также объяснил бы много других вещей, которые не являются CSS-синтаксисом, а скорее css-best-professional-use.

ОТВЕТЫ

Ответ 1

У людей будет ряд ответов на эти вопросы, но вот подходы, которые я бы взял:

Сброс

Если вы работаете с хрупкой компоновкой, которую можно легко сломать, если несколько пикселей не там, где вы ожидаете их, рассмотрите возможность использования reset. Я бы посмотрел на normalize.css. Вместо полной перезагрузки настроек браузера он сглаживает различия между браузерами.

Вы также можете рассмотреть возможность сброса определенных элементов, если вы обнаружите, что добавляете много margin: 0; в таблицы стилей.

Разделение документов CSS

Классы и идентификаторы или длинные цепочки селекторов

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

Работа с препроцессором CSS, например LESS или SASS может помочь вам написать более читаемые таблицы стилей. Возможность устанавливать правила стиля в LESS и SASS помогла мне избежать многих проблем, связанных с спецификой.

Тем не менее, специфика является хорошей темой CSS, которая должна быть знакома с:

Дополнительные ресурсы

Что касается дополнительного чтения...

Ответ 2

Я могу ответить на ваши вопросы, основываясь на собственном опыте, а не на лучших примерах.

  • я reset определенные теги, но не все теги, как "пуристы CSS". Имейте в виду, что если вы используете определенные библиотеки CSS, такие как пользовательский интерфейс JQuery, меню Superfish и т.д., Сброс тегов может действительно испортить интерфейсы этих библиотек.
  • Обычно у меня есть один общий файл конфигурации/конфигурации CSS, и каждая сложная страница имеет свой собственный CSS файл. Таким образом, каждая страница включает в себя эти 2 файла CSS плюс мои файлы библиотеки пользовательского интерфейса (JQuery UI и т.д.). Это облегчает мне вывод и поддержку.
  • 2K +?? Да, очень плохо. Если у вас есть файл большой, вы действительно должны использовать YSlow, чтобы узнать, сколько времени требуется для загрузки этого файла. Чем дольше вы загружаете страницу, тем быстрее вы покинете свою веб-страницу, если только они не будут вынуждены ее использовать.: D
  • Мне всегда нравится "обладать" моим CSS, предварительно добавив "#app". Это гарантирует, что моя глобальная настройка влияет только на содержание и макет страницы, и они не переопределяют библиотеки пользовательского интерфейса.
  • Используйте .class и #id любым способом, который имеет смысл для вас. Если вы знаете, что этот тег существует только один раз, используйте #id. Если вы знаете, что это может произойти более одного раза на странице, то единственным вариантом является использование .class.

Ответ 3

  • Сбросы: Я думаю, да, некоторые не любят их, поэтому вам решать, какой из них вам нравится.
  • Сплит против унифицированных файлов: Зависит. Преимущества для обоих (хорус: преимущества, преимущества!) Один CSS файл легче просматривать, и вы можете четко находить отношения в одном файле. Опять же, если вы планируете структуру своего сайта, разрабатываете разделенные виджеты или много людей, работающих над файлами CSS, то децентрализованный метод может принести вам пользу. С несколькими файлами CSS вы всегда можете использовать компрессор, чтобы обслуживать их для клиента в виде одного файла, поэтому это более важный вопрос.
  • Большие файлы/количество строк:. Вы говорите, что у вас есть 2000 файлов CSS (святое дерьмо!) или 2000 строк CSS файлов? Оба они невелики, хотя последние можно легко управлять в среде IDE, которая предоставляет контуры и обрабатывает наследование для вас. Бывший... ну, по крайней мере, у вас есть безопасность работы.
  • Родительские определения: Опять же, нет правильного ответа. Правила CSS для небольшого сайта будут сильно отличаться от сайта уровня предприятия. Хорошей отправной точкой может быть проверка того, как jQueryUI обрабатывает стили, а затем формирует ваше собственное мнение оттуда.
  • Правильные селектор: Стив Судерс рассказал об оптимизации селекторов CSS, придя к выводу, что это не стоит ваш средний сайт. Поэтому, игнорируя CSS-оптимизацию и основываясь на вашем примере, я бы сказал, что второй из них легче поддерживать и, в конечном счете, гораздо более предсказуемым. Если HTML немного изменится, первый из них быстро сломается. Второй не будет, и гораздо более портативный.

Есть вещи, которые вы можете сделать в CSS, чтобы сделать вашу жизнь проще. Я настоятельно рекомендую использовать сетку для макета (blueprint, 960GS и т.д.). Мне лично нравится использовать reset, поскольку он упрощает управление пиксельными проектами. Кроме этого, исследуйте, что нравится Эрику Мейерсу или сайту, alistapart.com или smashingmagazine.com должны говорить по этой теме.

tl; dr - нет правильного ответа, но, безусловно, некоторые хорошие варианты

Ответ 4

Как и во многих вещах, на самом деле нет прав и ошибок, больше о преимуществах и управляемости.

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

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

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

Лично мне нравится определять некоторые общие классы, я не уверен, оптимален ли он, но он очень полезен, например:

.bold {font-weight: bold}
.clear {clear: both}
.red {color: red}

Если вы сделаете это для общих требований, вы можете просто использовать код, например

<p class="bold red"></p>
<h2 class="red"></h2>
<br class="clear" />

Simples!

Ответ 5

Используйте вкладки. Делает это легче видеть. Также я предпочитаю использовать .classname, чем #id. Пример фрагмента CSS одного из моих сайтов:

body {
                font-family: Arial,Helvetica,sans-serif;
                font-size: 11px;
                background-color: #99D9EA;
            }

            .lcategorie {
                background-image: url('http://images.alphenweer.nl/i/gradient-menu-left.png');
                background-repeat: no-repeat;
                padding-left: 2px;
                text-align: left;
                color: #FFFF00;
                font-weight:bold;
                width:200px;
                height:20px;
                display:block;
                cursor:pointer;
            }

            .rcategorie {
                background-image: url('http://images.alphenweer.nl/i/gradient-menu-right.png');
                background-repeat: no-repeat;
                padding-right: 2px;
                text-align: right;
                font-weight:bold;
                color: #FFFF00;
                width:200px;
                height:20px;
                display:block;
                cursor:pointer
            }

Ответ 6

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

Мы все это переживаем. По моему мнению, это неизбежно.

Лучший подход, вероятно, заключается в том, чтобы наилучшим образом использовать доступные ресурсы и затем отфильтровывать их. Это умение развивается только со временем.

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

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

Так что исследовать-то, что я предлагаю.

Ответ 7

Если вам посчастливилось иметь Mac или Hackintosh... то я настоятельно рекомендую CSSEDIT (к сожалению, доступен только на Mac). Это позволит вам быстро развить понимание CSS. Я понимаю, что это не отвечает на ваш вопрос, но если вы попробуете это, вы поймете, почему это так важно для кривой обучения. К сожалению, ничто другое в окнах не приближается. Я использую окна в 99% случаев и переключаюсь на мой mac для CSSEDIT.