Какие советы для написания хорошего CSS?

Question

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

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

Разве я не использую CSS в полной мере? Какие есть способы сделать мои стили многократно используемыми без таких вещей, как .right-align { } .blue-text { }?

Answer 1

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

Answer 2

Вы не сможете придерживаться DRY с помощью CSS - вы получите повторение. Что мне нравится делать, так это использовать классы для определения более общих элементов темы, а также использовать идентификаторы для дифференциации.

Вы должны прочитать это: http://www.codinghorror.com/blog/2010/04/whats-wrong-with-css.html

Answer 3

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

Похоже, проблема СУХОЙ связана с дизайном, а не с вашим кодированием. Если дизайн требует вещей, которые выглядят по-разному на каждой странице, нет много возможностей для повторного использования.

Я обычно нахожу, что есть две ситуации, которые требуют создания класса:

1. Конструкция требует компонента, например, панель входа в систему, это концептуально одна вещь (хотя, вероятно, она будет состоять из более чем одного элемента HTML) и требует своих собственных стилей. Вот тогда я и создал бы класс, подобный log-in-panel.

2. Существует довольно сложный стиль (например, прямоугольник с тенями, закругленными углами, границами и градиентным фоном, и он должен выглядеть так же в IE), который используется в нескольких местах без особого концептуальная связь между ними. Вот тогда я и создал бы класс, подобный .box1. Если бы у меня был полу-сложный код, совместно используемый различными блоками (реализация их в IE 6 - любимая кошмарная задача в компании, в которой я работала фрилансером), я бы разбил его на класс, подобный box.

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