プログラミング スタイルはその人の個性のようなもので、プログラマー (デザイナー) によって書き方が異なることがよくあります。 WordPress テーマを例にとると、適切なコード スタイルで自分の好みに合ったテーマ ファイルを使用することを好む場合があります。そして、それらの乱雑で読みにくい CSS ファイルを研究しなければならない場合はどうすればよいでしょうか? 「Styleneat」を使用すると、CSS セレクター、サブセレクター、プロパティをカスケード構造に従って再編成して構築できるため、CSS ファイルがより整理され、読みやすくなります。ページ レイアウトを定義し、さまざまな構造間の関係を確認することが容易になります。
CSS ファイル構造フォーマット再編成サービス「
Styleneat 」は、乱雑な書き方の CSS ファイルをカスケード構造に再編成して、閲覧や調査を容易にする非常に実用的なオンライン ツールです。
これは 3 つの異なる方法で使用できます: 1. コードを直接貼り付けます。 2. CSS ファイルをアップロードします。 3. CSS ファイルのアドレスを入力します。 CSS プロパティとセレクターによるアルファベット順の並べ替え、複数行または単一行形式の再編成、安全な再編成モードのオンなどのオプション設定もあります。
使用効果を見てみましょう。
元のコード:
ソースコードの例
[www.downcodes.com]
#メニューバー .menus {
背景:#E9EEF1;
フロート:左;
パディング:0 10px;
}
#menubar .menus li {
フロート:左;
境界線のスタイル:実線;
境界線の色:#FFF;
ボーダー幅:0 1px;
マージン左:-1px;
リストスタイルタイプ:なし;
}
#menubar .menus li a { 表示:ブロック;テキスト装飾:なし;パディング:5px 10px;}
#menubar .menus li a:hover {
背景:#EEDDCC;
リストスタイルタイプ:なし;
}
#menubar .menus .current_page_item {
背景:#FFF;
フォントの太さ:太字;
}
#menubar .menus li.current_page_item a:hover {
背景:#FFF;
}
再構築されたコード:
ソースコードの例
[www.downcodes.com]
#メニューバー .menus {
背景:#E9EEF1;
フロート:左;
パディング:0 10px;
#menubar .menus li {
フロート:左;
境界線のスタイル:実線;
境界線の色:#FFF;
ボーダー幅:0 1px;
マージン左:-1px;
リストスタイルタイプ:なし;
#menubar .menus li a {
表示:ブロック;
テキスト装飾:なし;
パディング:5px 10px;
#menubar .menus li a:hover {
背景:#EEDDCC;
リストスタイルタイプ:なし;
#menubar .menus .current_page_item {
背景:#FFF;
フォントの太さ:太字;
#menubar .menus li.current_page_item a:hover {background:#FFF}
