ヘルパークラス

画像 個人的に、時々、次のページを作成したり、既存のページを変更したりするときに、単純なスタイルパラメータを追加する必要があります(または単に必要です)。 スタイル定義をマークアップに書きたくないのは、それがかなり長い行のセットであるだけでなく、この定義が永久にマークアップに残ることができるからです(彼らが言うように:一時的なものより永続的なものはありません)。 さらに、すべての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:自分のバイクを作成するすべての相手に、通り過ぎるようにお願いします。あなたの意見は事前に知っています

Source: https://habr.com/ru/post/J47305/


All Articles