ウェブサイトのデザイナーが悪いコードを提供するのはなぜですか?

コーダーとプログラマーは、そのようなサービスの仕事の結果にますます対処しなければならないので、私はこの記事を書いています。 また、少なくとも低コストのサイトのセグメントでは、彼らとの競争を経験しなければなりません。 また、サイトデザイナーがこの角度から検討されている、基本的な記事はほとんどありません。 悪いコードの原因は何か、デザイナーが大量の手動植字を置き換える可能性があるのか​​、それともすべての可能性のないおもちゃなのかを知ることは有益です。



画像



コードが不良であることが判明した理由を分類するには、可能であればカスタマイズして、デザイナー自身の小さな分類を与える必要があります。 条件付きで、テンプレートと無料編集の2つのグループに分けることができます。 この記事では、テンプレートデザイナでは特定の仕様でサイトが手動で開発され、これらのサイトをデザイナで後で編集できるため、無料編集のサービスのみを検討します。 しかし、これにもかかわらず、実際にはほとんどの場合破損していることも示されています。



HTMLとCSSの両方での不正なコードの原因を調べます。 しかし、悪いコードの基礎はCSSなので、それから始めましょう。



CSSを悪くする理由:



1)位置:絶対。 これは、ページ上のすべての要素の絶対値にpositionプロパティがある場合です。 この理由は、他のすべてが基づいている基礎です。 値が絶対値の場合、そのようなサービスの開発者が何をしても、高品質のコードを取得する方法はありません。 最近まで(レスポンシブデザインを作成するまで)、ダーティコードにもかかわらず、このアプローチは少し正当化されていました。サービスのユーザーがページ内で要素を自由に移動できるためです。 現在、レスポンシブデザインでサイトを作成する必要がある場合、位置:アブソリュートの使用はいずれの側でも正当化されません。アブソリュートではレスポンシブデザインでサイトを作成する方法がないためです。



過去3年間に、一方では制限なしでサイトをカスタマイズできるサービスがありますが、同時にページ上の要素は適切な位置にあります。静的:クリーンなコードと優れたレスポンシブデザインを取得できます。 ただし、ページ内で要素を自由に移動することはできないため、このようなサービスでの作業の複雑さが欠点です。 絶対的な選択肢-ユーザーにとっては簡単ですが、コードが汚れている、または応答性が高い-仕事は難しいが、コードはきれいな選択肢があります。 現在、絶対を使用することは正当化されていないため、要素で静的を使用する必要があります。



2)クラスではなくid。 要素がクラスではなくidを使用する場合、コードもクリーンではありません。 この理由は、CSSで複製されるため、そのようなコードで作業することが困難になるためです。 この状況は、position:絶対要素がposition:staticの場合にも発生することがよくあります。 絶対クラスがクラスを使用しない場合、これは必要です。静的クラスはidをクラスに置き換えることができ、開発者のエラーはありません。



画像



これらが、サイトビルダーが汚れたCSSを生成する2つの主な理由です。 しかし、他にもあります。



3)余分なスタイルはクリアされません。 たとえば、すべてのセレクターで、意味をなさない同じスタイル:border:none、posiiton:staticなど。 これらのスタイルが必要な場合は、各要素ではなく、全員に規定する必要があります。



画像



4)異なる画面でのスタイルの複製。 たとえば、コンピュータのマージン:45px auto 0 auto、およびモバイルのマージン:25px auto 0 auto。 携帯端末で簡単にmargin-top:25pxと書くことができます。



5)スタイルを簡潔な形式で記録します。 このようなスタイルの余白、パディング、背景、フォントは省略形で記述する必要があります。 たとえば、margin-top:10px、margin-left:auto、margin-right:autoの代わりに、単にmargin:10px auto 0 autoと書くことができます。



画像



これらがCSSを汚す理由です。 次に、HTMLを不良にする理由を見てみましょう。



1)スタイル属性のスタイル。 タグの場合、スタイルはスタイル属性に登録されますが、CSSファイルには登録されません。 コンストラクタの開発者がスタイル属性でスタイルを規定する場合、ダーティコードに加えて、他の結果があります:



-クラスを使用することはできません-IDのみ。

-通常のレスポンシブデザインは間違いなく機能しません。JSの形式の松葉杖を使用することのみが可能です。



画像



2)クラスまたはIDは自動的に生成され、変更できません。 これらは、クラスclass = "s9387893484"の形式のセマンティックロードを実行しません。 この1点だけで、コード全体が台無しになります。



画像



3)大規模なネスティング。 余分なタグラッパーは、意味をなさないため、手動での開発中には存在しないはずです。



画像



4)コードのフォーマットはありません。



画像



5)追加の属性とクラス。 コードには、CSSスタイルやJSには必要ない多くのクラスと属性があります。



6)一部のタグからクラスを削除できます。 たとえば、「p」タグからクラスを削除し、CSSで.parent> pセレクターを記述できます。



まとめると



サイトビルダーコードをエクスポートしたHTMLとCSSの理由をリストしました。 理論的には、上記で説明したすべてのエラーを回避する場合、ソリッドセッターの非常にクリーンなコードを取得できます。これにより、タイプセッターやプログラマーが問題なく作業できます。 もちろん、このコードはレイアウトの「グル」よりもわずかに劣りますが、低価格カテゴリで設計されたサイト(特にレスポンシブデザインアプリケーションを使用している場合)よりも少なくとも悪くはなく、時には優れています。



All Articles