Каскадные Таблицы Стилей / Вспомогательные классы


Каскадные Таблицы Стилей / Вспомогательные классы


Лично мне, иногда, при верстке очередной страницы или изменении существующей, требуется (или просто хочется) добавить несколько простейших параметров стилей. Писать определение стиля в разметке не очень хочется, не только из-за того, что это набор достаточно длинной строки, но и потому, что это определение потом может остаться в разметке навсегда (как говориться: нет ничего постояннее временного). Кроме того, в каждом отдельном файле CSS-стилей порой валяются одни и те же классы стилей в одну строчку. Давно собирался определить для себя некую библиотеку с набором таких стилей и с установленным навсегда названиями. И вот такой получился результат.

xclasses.css

Примитивная демонстрация применения этих классов доступна по этому адресу.

/*"w-" -- width"t-" -- text"b-" -- block"l-" -- list*/.clear-both{clear: both;}.w-full{width: 100%;}.w-half{width: 50%;}/* Block */.b-inline{display: inline;}.b-center{margin: 0 auto;}.b-float{float: left; }.b-floatr{float: right;}/* Text */.t-right{text-align: right;}.t-left{text-align: left;}.t-center{text-align: center;}.t-middle{vertical-align: middle;}.t-bold{font-weight: bold;}/* State */.error{color: #F00;}.warn{color: #FF0;}.ok{color: #0F0;}.hidden{display: none;}/* List */ul.l-nostyle{list-style-type: none; }ul.l-nopad,ul.l-nopad > li{padding: 0;margin: 0;}ul.l-flat > li{display: inline;}/* Border */.border-all > *,.border{border: solid 1px;}/* Links */.lnk-nounderline{text-decoration: none;}.lnk-border{text-decoration: none;border-bottom: dashed 1px;}/**/.enum{padding-left: 10px;}


Пояснения

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

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

PS: прошу всех противников создания своих велосипедов проходить мимо, мне ваше мнение заранее известно

_________
Текст подготовлен в ХабраРедакторе


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.


19 декабря 2008  2 3 043   Версия для печати


Похожие публикации

Каскадные Таблицы Стилей / Заметка про верхний/нижний регистр текста

Прочитав много статей про Android 2.2 «Froyo», решил посмотреть, на официальном сайте производителя моего смартфона, нет ли каких-либо заметок про обновление прошивки. Зайдя в Google и набрав текст... читать далее

Блог им. maxmoriss / CSS. Выходим на новый уровень

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

Блог им. freeatnet / Очередной раунд борьбы с баннерами в ЖЖ

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

Каскадные Таблицы Стилей / Перевод Сброс стилей с помощью CSS Reset

Данная статья — первая из цикла на тему укрощения CSS. Сегодня мы рассмотрим технологию CSS Reset. Зачем это нужно? Каждый браузер устанавливает свои значения стилей по умолчанию для различных... читать далее

Каскадные Таблицы Стилей / Печатаем сайты 2 — Печать, страницы и разные броузеры

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

Блог им. mancocapac / Перевод Создание чистого CSS-шаблона для Joomla 1.5 — часть 2.2

Предыдущие статьи: Создаем шаблон Joomlа по стандартам — часть 1 Создаем шаблон Joomlа по стандартам — часть 1 (продолжение) Создание чистого CSS-шаблона для Joomla 1.5 — часть 2.1 CSS для Joomla... читать далее

Комментарии (2)

  1. #1 написал: Addrion8532
    Группа: Гости
    3 января 2009 02:38

    Вот бы такого побольше появлялось. А то в офисе заняться нечем, замучались уже в потолок плевать.
    • 0

       

  2. #2 написал: Barney6988
    Группа: Гости
    6 января 2009 12:22

    В закладках!
    • 0

       

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте