Pull to refresh

Вспомогательные классы

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

xclasses.css


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

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

Пояснения


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

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

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

Tags: CSSxclassesдля себя
Hubs: CSS
Total votes 78: ↑57 and ↓21 +36
Comments 101
Comments Comments 101

Popular right now