Уменьшение повторения кода CSS

Я нахожу себя постоянно повторно использующим различные блоки кода в CSS для различных элементов. Один из них - закругленные углы. Пример кода ниже:Уменьшение повторения кода CSS

-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
-khtml-border-radius: 10px; 
border-radius: 10px;

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

Первый заключается в том, чтобы обернуть код в классе, таком как .rounded10, и добавить этот класс ко всем элементам страницы, которым требуются закругленные границы (есть хорошие 20+). Bootstrap делает что-то подобное, но мне не нравится этот метод, поскольку он вводит нестандартные данные в HTML.

Второй создать список элементов в CSS, которые должны иметь закругленные границы, как:

.offers, .welcome, .sidebar, .post { 
    ... Rounded corners code here ... 
}

Я не уверен, если этот метод используется даже, я не видел его.

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

Я не использую SASS или LESS, или какие-либо рамки CSS или помощники, такие как Compass (хотя у меня есть). Я предпочитаю код с ванильным CSS. Я просто работаю. Пожалуйста, никаких советов по их использованию.

источник

2013-05-07 James Jeffery

Я не думаю, что осталось столько правил, которые нужны префиксам поставщиков. Вам, конечно, не нужны префиксы поставщиков для 'border-radius' больше –

@ExplosionPills Я не знал об этом, граничный радиус был всего лишь примером. –

Второй способ, который вы предлагаете, кажется, имеет наименьшее количество проблем, если вы не хотите использовать класс '.rounded'. Это, безусловно, не должно быть проблемой, и было бы легче изменить все экземпляры углов. Единственная потенциальная проблема заключается в том, что вам нужна группа, имеющая разные углы. Я согласен с ответом @Elliot Lings ниже: вероятно, есть более глубокая проблема в повторном использовании, если вы не хотите использовать один класс стиля для его выполнения. –

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

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

Есть несколько замечательных статей по семантике HTML и CSS, например http://nicolasgallagher.com/about-html-semantics-front-end-architecture/.

Я не собираюсь предлагать вам использовать что-то вроде SASS или LESS, но я настоятельно рекомендую вам это сделать. Это позволит вам легко добавлять закругленные угловые классы и экономить время при выводе сжатых форматов вашего CSS.

источник

2013-05-07 23:10:33

+1; это в основном то, что я собирался написать. Единственное, что я хотел бы добавить, это то, что смысл просто использовать класс «.rounded»; это * точно * правильный способ разделить проблемы не только между CSS и HTML, но и внутри CSS. –

Согласен. Объявите инструменты, которые доступны для «исправления» недостатков CSS и ускорения разработки. – Bart

@ Эллиота Я проверю эту статью спасибо. Я могу снова вернуться к использованию SASS. –

-2

Один из способов обрезать css - использовать лучшие селектор. Например, если вам нужно иметь все div в вашем блоке меню, чтобы иметь цвет фона, вы могли бы:

#menu div 
{ 
    background-colour:red; 
}

См CSS selectors на Sitepoint для хорошего refrence.

источник

2013-05-07 23:46:43 mikek3332002

Уменьшение повторения кода CSS

ответ

Смежные вопросы