Pull to refresh

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

Reading time3 min
Views2.9K
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:
Hubs:
Total votes 78: ↑57 and ↓21+36
Comments101

Articles