Переучивание CSS правильным способом

Я программист, занимающийся веб-разработкой уже более двух лет. Несмотря на то, что Ive занимался инженерными разработками в течение последних двух лет, я не думаю, что сделал это правильно.
Например:

  • Я все еще делаю макет с таблицами, а не только с CSS. Я еще не нашел способ правильно представить данные, выровненные и табличные.
  • Я не знаю разницы между display: none и visibility: hidden (ну, я знаю это сейчас, но есть много случаев, например: заполнение, поля, переполнение и т.д.)
  • Я действительно не следовал методу наследования CSS. Почти каждый стиль начинается с #, а не класса.
  • Всякий раз, когда страница загружается медленно, элементы html неуместны и приводятся в порядок только при полной загрузке.
  • Я не знаю, что передает эта картинка в firebug (кстати, firebug - мой спаситель. Жизнь была бы невозможна без Firebug)

alt text

  • Всякий раз, когда макеты в беспорядке, я искушаюсь использовать позицию: абсолютный. Неизменно это заканчивается большим беспорядком.

Я знаю, что я делаю много чего не так (и мне нужно это сделать правильно), но мне удается все складывать и как-то показывать, только чтобы увидеть, как это испортилось в другом браузере.

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

Можете ли вы указать мне ресурсы или добавить общие советы и подсказки, используемые разработчиками CSS, чтобы все было правильно.

Ответы

Ответ 2

Вот некоторые общие правила для жизни:

  • Таблицы хороши для табличных данных. Если данные, которые вы представляете, относятся к таблице, не пытайтесь сделать сетку из <div> s. Не имеет смысла.
  • Что касается макета, используйте теги <div>, держитесь подальше от таблиц. Знать свойство float хорошо. С помощью CSS3 появятся новые, улучшенные стандарты для свойства display. Изучите их.
  • display: none полностью удаляет элемент из окна просмотра. И наоборот, visibility: hidden сохраняет пробелы, которые элемент в противном случае принял бы. В обоих случаях элемент остается в DOM.
  • Общее правило классов и идентификаторов. Элементы страницы и идентификаторы должны иметь отношение "один к одному" на странице. Например, # Column1, # Column2, #Footer, #Header. С другой стороны, элементы страницы и классы должны быть отношениями "один-к-одному", например:.container или .navLink. Используйте классы, когда вы знаете, что собираетесь использовать определенный элемент совсем немного.
  • Подумайте об эффективности. Чем меньше правил стиля у вас есть, тем быстрее ваша страница будет загружаться, а более легкие проблемы с стилями будут отлаживаться.

У меня есть около миллиона других вещей, чтобы сказать, но это должно заставить вас начать.

Ответ 3

Для ориентированного на макет CSS не забудьте проверить Все, что вы знаете о CSS, неверно. Это немного передний край, поскольку IE 7 не поддерживает display: table (жаль, я знаю), но он охватывает традиционные методы CSS раскладки, такие как плавное и абсолютное позиционирование, и обеспечивает хороший переход от табличных макетов к CSS, Я очень рекомендую его.

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

Наконец, CSS лучше всего работает, когда у вас есть семантически правильный (x) html под капотом. По-моему, проще всего увидеть и изучить "хороший" CSS, когда у вас есть отличный, семантически правильный html внизу. Вот хороший обзор того, когда использовать теги. Как правило, я считаю, что лучше всего писать свой контент с без учета того, что когда-либо, как он будет выглядеть позже, а затем использовать CSS позже, чтобы сделать его великолепным.

Как всегда, вы можете выбрать множество опрятных советов и трюков в CSS Tricks, которые всегда помогли мне узнать больше о правильных использование языка (например, когда я узнал о overflow: auto для содержащихся плавающих элементов! Genius!).

Надеюсь, что это поможет!

Ответ 4

  • Посетите CSS Zen Garden, чтобы увидеть, что вы можете делать только с CSS.

  • Посетите школы W3 и следуйте инструкциям. Это может показаться вам простым, но вы узнаете основные вещи.

  • Посетите некоторые сайты, такие как Список Apart, чтобы увидеть, как делать вещи и учиться трюкам.

  • Посмотрите, подходит ли CSS-инфраструктура вашим потребностям (например, 960 Grid).

Ответ 5

Я предполагаю, что вы установили Firebug?

Кроме того, http://www.doctype.com может получить более релевантные результаты.

Ответ 6

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

Eric Meyer Каскадные таблицы стилей 2.0 Справочник для программистов - отличный ресурс для понимания того, как работают селекторы и правила, и служит отличной ссылкой также.

Некоторые мысли о том, что вы опубликовали.

  • A Мастер Reset таблица стилей будет помощь с различиями браузера.

  • И табличные данные должны использовать таблицы.
    Это макеты, которые должны избегать таблицы теги в пользу css.

Ответ 7

Много людей здесь дают хорошие советы. Я просто добавлю еще два:

  • Сначала попробуйте написать допустимый (X) HTML. Вы можете легко протестировать свой HTML-код, используя W3C HTML validator. Сосредоточьтесь главным образом на содержании, а не на стиле.
  • Во-вторых, попробуйте написать допустимый CSS, желательно в отдельном файле .css. Избегайте использования атрибута style. (Эта часть может быть сложной, если вы хотите поддерживать некоторые старые браузеры из Редмонда). Вы можете протестировать свой CSS, используя W3C CSS validator.

Ответ 8

Прочитайте CSS: окончательное руководство Эрика Мейера. Он объясняет, почему был создан CSS, как он работает (в соответствии со стандартами), и предоставит вам информацию, чтобы понять тонкости. Это также дает хорошие рекомендации.

Ответ 9

Эксперимент в Firebug

Я не знаю, что это за картина в Firebug передает

Firebug сам может вам помочь. Сделайте это:

  • Создайте div с некоторым текстом в нем.
  • Используйте CSS, чтобы дать ему padding: 5px; margin: 5px; border: 1px solid black;
  • Изучите его в Firebug, как вы видите в своем вопросе.
  • Нажмите на любой из этих номеров в поле модели, в котором он отображается, и начните нажимать стрелки вверх и вниз (или введите другой номер).
  • Посмотрите, как он изменяется в реальном времени? Это одна из лучших вещей в Firebug: она позволяет вам настраивать без перезагрузки, а затем изменять свою таблицу стилей, когда она выглядит правильно.
  • Продолжайте делать это, пока не поймете, как работают отступы, поля и границы.

Ответ 10

Я думаю, вы должны использовать для своего макета одну из так называемых "CSS-фреймворков" (960.gs),

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

CSS просты и не являются реальным языком программирования: не бойтесь слова "рамки";)

Ответ 11

Вы можете начать с чтения хороших книг по этому вопросу. Эрик Мейер на руках и очень высокого качества. Другая книга, о которой я многому научился, была книга дизайна Zen CSS.

И остальное - это усилие и практика. Убедитесь, что вы понимаете, почему что-то работает так, как это делается, не удовлетворены разработкой css-проб и ошибок.

Ответ 12

Хорошо, я рассмотрю некоторые из этих вопросов, насколько смогу.

Разница между display:none и visibility:hidden заключается в том, что на дисплее установлено, что место для этого элемента не зарезервировано. Поэтому представьте себе, что когда дисплей установлен, элемент "ушел" со страницы. Если вы используете параметр видимости, элементы находятся на странице, на их месте просто невидимы. Я ясно это объяснил? Надеюсь, это имеет смысл для вас.

Что касается отступов, границ и полей, все это называется CSS Box Model. Информация содержится в виде элемента, его заполнения, границы, а затем его полей. Таким образом, заполнение - это расстояние между содержимым элемента и его границей, тогда как край - это расстояние между границей и соседним элементом. Опять же, я надеюсь, что это поможет вам немного разобраться.

Переход к CSS иногда бывает сложным, но стоит того.

Ответ 13

Хорошо, основы очень просты, вам действительно нужно повеселиться довольно легко, если вы уже не кодируете CSS.

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

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

Ответ 14

для меня, Шаблоны дизайна CSS и HTML от Michael Bowers изменили все это. больше нет бесконечных проб и ошибок, а проблема - шаблон - решение. незаменим.

Ответ 15

Всякий раз, когда страница загружается медленно, элементы html неуместны и приводятся в порядок только при полной загрузке.
  • Вы помещаете свои таблицы стилей вверху в разделе <head>?
  • Вы объявляете явные размеры изображений, или браузер должен угадать, а затем переупорядочивать вещи при появлении изображения?

Ответ 16

В зависимости от вашего стиля обучения я бы рекомендовал перейти прямо к исходному: определение CSS. Здесь вы можете найти каждый из различных спецификаций: http://www.w3.org/Style/CSS/. Хотя спецификация действительно не покрывает специфические особенности браузера (если бы это было так, они бы не были причудами, не так ли?), Это действительно хорошая работа (для меня) объяснения того, как работает каждая часть.

Ответ 17

http://htmldog.com/ - это, на мой взгляд, один из окончательных ресурсов для правильного изучения веб-разработки.

Ответ 18

Я расскажу вам свой секрет: следуйте этим двум классическим учебникам

Listutorial

Floatutorial

И вы узнаете 80% того, что вам нужно знать о CSS.