Personally, I sometimes need to add (or simply want to) add a few simplest style parameters when creating a regular page or changing an existing page. I do not really want to write the definition of style in the markup, not only because it is a set of a long enough string, but also because this definition can then remain in the markup forever (as they say: there is nothing more permanent than temporary). In addition, in each separate CSS-style file, sometimes the same style classes lie in one line. For a long time I was going to define for myself a certain library with a set of such styles and with names forever established. And so this was the result./*<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/>
}Source: https://habr.com/ru/post/47305/
All Articles