Easy CSSカスタマイズのためのHTMLを設計するためのガイドライン -- html フィールド と css フィールド と saas フィールド 関連 問題

Guidelines for designing HTML for easy CSS customization




SaaSプロジェクトをしています、そして、私たちは「彼の」WebサイトのためにCSSページをアップロードできるようにします。 (実際には、すべての顧客のサイトは仮想ホスティングを使用して私たちがホストされています)。

CSSを適用できるように、ページのHTMLを設計する際の良いガイドラインとは何ですか。 posteriori


I am doing a Saas project, and we want each customer to be able to upload a css page for "his" web site. (Although actually, all of the customer's sites are hosted by us using virtual hosting).

What are good guidelines when designing the html of a page so that css can be applied a posteriori.




CSS Zen Garden で、コードを見ることができます。特にスタイル可能に設計されています。




<事前> <コード> <a href="#"><span>text</span></a>

このように、 "href="http://www.alistapart.com/articles/slidingdoors/" real="nofollow noreferrer">スライドドアを使って、外観のような動的ボタンを提供するのは簡単です。 A> "Technique、アンカータグに1つのバックグラウンドを追加し、もう1つはSPANタグに追加します。リンクがスタイルされていない場合、SPANタグはレイアウトにまったく影響しません。


You can have a look at the code at CSS Zen Garden, it's specifically designed to be stylable.

Generally, you should just use the most natural HTML elements for the function you want. Lists should be lists, links for navigation, et.c.

Use div tags to separate the contents in logical divisions To make elements easy to target, set appropriate classes and id's on them.

To make links really stylable you can simply add a span tag around the text:

<a href="#"><span>text</span></a> 

This way it's easy to give it a dynamic button like look by using the "sliding doors" technique, by adding one background to the anchor tag and another to the span tag. If the link is not styled, the span tag is not affecting the layout at all.


あなたは CSS Zen Garden を見て、それを見ていることができます。


You could have a look at css Zen Garden, and see how they do it.






は、ユーザーがCSSを編集できるようにできますか?< / a>



Don't do it.

The customers will screw the design and will be calling you to reset it for them.

Better make a BIG customization section with LOTS of options that would only produce valid values. Allow images to be uploaded, check their size limits at the submission.

A custom CSS may also be a source of attacks. We talked about it yesterday.

Is it safe to allow users to edit css?

Anyway, this kind of customization can only be performed for relatively simple pages, before all, just the pages. We are talking here about a SaaS application which usually has a terribly complex UI trying to mimic classic desktop software. I doubt customers will be able to correctly customize a respectively complex CSS. Well, not without hiring a professional programmer that will be calling you back all the time to clear up things. It will be easier to simply offer an advanced settings screen.



  • あなたのすべてのクラス、IDを一貫した明白な命名方式で名前を付けてくださいが、すべての命名をしないでください、あなたはすべて同一である場合は、子供の名前のないオブジェクトになることができます。

  • ページの外観のものを変更するJavaScriptを切り出します。ユーザーはそれを破るでしょう。

  • CSSリセットスタイルシートを使用しないでください。物事を複雑にするでしょう。ユーザーがCSSに対処しようとしている場合は、ブラウザの問題に対処してください。

  • HTMLのすべては有効、それはありませんか?

    < / li>

Some might be blatantly obvious:

  • Name all your classes, IDs with a consistent and obvious naming scheme, but don't go naming everything, you can let smaller objects that are children to be unnamed objects if they are all identical.

  • Cut out Javascript that changes anything of the look of the page. Users will break it.

  • Don't use CSS reset stylesheets. It'll complicate things. If users are going to deal with CSS, let them deal with the cross-browser issues.

  • All of the HTML will be valid, won't it?



それでは、スタイリングを簡単にするために exter 要素を追加することを恐れないでください。たとえば、ある種の種類のグリッドを表す(すなわち、プレーンテキストテーブルだけでなく)テーブルがある場合は、特定のデータセルが注意の焦点になるように、それでも単に可能であるかもしれません。 TDにクラスを設定すると、TD内の新しい要素のネスト(およびそのクラスをその上に設定します)が表示されます。このような追加のネスティング要素は、ブラウザ間でサポートされていない可能性がある複雑なCSSセレクタの必要性を大幅に削減します。複数の意味を持つ単一のクラスを持つよりも複数のクラスを持つことが要素にとって優れています。そしてクラスが至る所で同じ意味を持つことがより良いです(他のクラスに依存しないように)。

あなたのHTMLはソートのAPIになり、それを理解できるようにすることが重要です。 JavaScriptはそれが必要であれば、JavaScriptをCSSの方法から維持しようとしています - JavaScriptがDOMに加える変更よりも必ず「API」と矛盾していることを確認してください。 JavaScript。 JavaScriptがPopupをPopupにする必要がある場合は、 <div class="js-extrainfo-pop>...</div> を適切な場所にドキュメントに追加し、Z-に対処するのではなく、ポップアップのスタイル方法を決定させるだけです。索引、表示:JavaScriptの絶対など。そのように、クライアントCSSは、JS-Wartの周りの仕事ではなく、1つのAPI - あなたのHTML構造のみを学ぶ必要があります。 DOMは管理可能なインターフェースであり、JavaScriptはかなり複雑です。

最後に、ほとんどの顧客はあなたの基本的なレイアウトを少し変更したくない可能性があります。必要に応じてテーブルを使うことを恐れないでください。テーブルを使用せずにCSSを介してグリッドベースのレイアウトを適用するのは、驚くほどトリッキー(しばしば不可能です)。少なくとも、Table-TBody-TR-TD構造体と並行して構文構造を使用し、CSSのディスプレイを介してテーブルとしてテーブルとしてスタイルを使用する必要があります.aplay:table- *ルール(どんな行も等しくサポートされていません。良い)。グリッドが必要な場合は、テーブルを使用して心配を停止してください。 Real CSS「英雄」は、とにかくあなたの「暗黙の」レイアウトのいずれかをオーバーライドし、合理的な基本点から始めて初期のUnStyled Pageをより明白に見せるでしょう、そしてクライアントは彼ら自身のスタイリングの選択をするのを助けるでしょう。


  1. HTMLが十分に冗長であることを確認してください(疑問がある場合は、追加のネストされた要素や追加のクラスを使用しています)。
  2. あなたのHTMLは、読みやすさのためだけに意味的に「明らか」であるべきです
  3. 特定の種類のレイアウトで強くヒントすることを恐れないでください。
  4. あなたのAPIが「クリーン」であることを確認してください - スタイルに敏感なJavaScriptを含む複雑さを紹介しないでください。

Basically, start off with reasonably semantic (and valid!) html, and be sure to use a fairly wide array of elements (don't make everything a div) and classes (sprinkle liberally where it seems appropriate. Using a variety of elements makes for more readable css and html, which is important for easy stylability.

Then, don't be afraid to add extra elements just to make styling easier. For instance, if you have a table representing a grid of some sort (i.e., not just a plain text table), and you'd like a particular data-cell to be the focus of attention, then although it may be possible to simply set a class on the td, you're better off nesting a new element within the td (and setting the class on that). Extra nesting elements like this greatly reduce the need for complex css selectors which may not even be supported across browsers. It's better for an element to have multiple classes than to have a single class with multiple meanings; and it's better for a class to have the same meaning everywhere (i.e. not to be dependent on other classes).

Your html will be an API of sorts, so keeping it comprehensible is important. Javascript makes things tricky, so if you need any, I'd try to keep javascript out of css's way - make sure than any modifications that javascript makes to the dom are consistent with your "API" - don't hardcode specific layout overrides into the javascript. If javascript needs to make a popup to display extra info, say, then simply add a <div class="js-extrainfo-pop>...</div> to the document at an appropriate location and let the css decide how to style the popup, rather than dealing with z-indexes, display: absolute etc. in javascript. That way, the client CSS need learn only one API - your html structure - rather than work around a JS-wart. The DOM is a manageable interface, javascript is quite a bit more complex.

Finally, most customers are likely to want only minor modifications to your basic layout; so don't be afraid to use tables where necessary. It's surprisingly tricky (often outright impossible) to apply grid-based layout via css without using tables. At the very least, you'll need to use a syntactic structure parallel to the table-tbody-tr-td structure, and let people style that as a table via css's display:table-* rules (which aren't supported everywhere equally well). If you're sure you need a grid, use a table and stop worrying. Real css "heroes" will override any of your "implicit" layout anyhow, and starting with a reasonable base point will make the initial unstyled page look more obvious, and will help clients make their own styling choices.

In summary,

  1. Make sure your html is sufficiently verbose (when in doubt use an extra nested element or an extra class).
  2. Your html should be semantically "obvious" if only for readability
  3. Don't be afraid to strongly hint at a particular type of layout.
  4. Make sure your API is "clean" - don't introduce complexities by including style-sensitive javascript.

短いヒント:このアプローチの中でセマンティクスが重要だと思います。 floatleft width100px または right_column のようなクラスに名前を付ける傾向がある多くのWebサイトを見ました。これは、あなたがHTMLであなたがウェブサイトをどのように予想するのかを言っていることを意味します。 CSSクラスに、 sidebar または widget のように意味的な意味を与えてください。これにより、HTMLおよびCSSコードははるかに読みやすくなります。

HTML5と新しいタグを見てくださいこれは紹介しますか? Nice Blogpostは、woork: HTML5のCSSコード構造


Short tip: I think semantics are key in this approach. I've seen a lot of websites that tend to name their classes like floatleft, width100px or right_column. This means you are saying in the HTML how you expect the website to look like. Give the CSS classes a semantic meaning, like sidebar or widget, this makes the HTML and CSS code much more readable.

Maybe have a look at HTML5 and the new tags this will introduce? Nice blogpost can be found at Woork: CSS code structure for HTML5




I too am kind of going through this type of issue. For class we needed to take all of the styling we had in HTML and strictly include it to only a css file. I wish that I had known about CSS and only needing to do styling within that file instead of having to go back through and fix everything that I messed up switching the style from HTML to CSS. I think if I were to have to design another website I'd lay everything out in a CSS file and then just input the content into and HTML file and then run them together.



16  データベースデザイン - 複数のルックアップ/ ENUMテーブルまたは1つの大きなテーブル?  ( Database design multiple lookup enum tables or one large table ) 
私は、それらの列値のほとんどの検索/ enum参照を使用する多くのテーブルを持っています。 例えば: Person Table - Personid |レースコード|ヘアコロルコード|ヘアスタイルコード| TeathConditionCode ロケ...

1  HTTPコールバックを使用したIMAPアイドル監視サービス?  ( Imap idle monitoring service with http callback ) 
私は、CronJobを介して毎分(PHPのIMAPモジュール経由で)IMAPメールボックスをポーリングする小さなWebアプリを持っています。最大1分の遅れができれば、これをよりリアルタイムにしたいのですが。 IMAPメールボックスに接続するサービスは、IMA...

3  エラー:インポートするファイルが見つからないか、読めない場合:コンパス。レール3.1  ( Error file to import not found or unreadable compass in rails 3 1 ) 
私は構成するRailsプロジェクトを与えられています。 ubuntu を使っています レール3.1 ルビー1.9.2 以下のエラーに直面しています: <事前> <コード> File to import not found or unreadable: c...

1  Speech-To-Speech API(TTS)サービスが存在しますか?  ( What text to speech api tts services exist ) 
APIを介したサービスを使用して、サーバー上でテキスト間の変換を実行したい。 Googleテキスト間(TTS)はこれには利用できません。利用可能な代替案(支払われ無料)? ...

2  Rails SaaSの評価を設定します  ( Setting up a rails saas archictecture ) 
レールのSAAS環境を設定するときは、共有コード、例えば認証システムがエンジンで、すべてのクライアントアプリに含まれていることがわかります。 私はもう一方の方法でそれをすることを考えていたので、共有コードを使ってメインアプリを作り、クライアントアプリをエンジン...

3  SaaSとしてRedmineを実装する方法  ( How to implement redmine as saas ) 
マルチテナント機能を備えたSaaSアプリケーションとしてRedmineを使用する予定です。私はherokuにredmineをロードしましたが、今、私は空白の位置にいます。 インストールされたRedmineは、 http://dreamreamreadmine....

5  ASP.NETマルチテナントSaaSアプリケーションにおけるローカライズ(I18N)  ( Localization i18n in asp net multi tenant saas application ) 
問題シナリオ: SaaSベースのアプリケーションでASP.NETローカライゼーションを実装します。 追加の複雑さ:テナントはローカライズされたコンテンツを編集できるはずです。したがって、ホストされているアプリケーションに5つの言語が5つの言語で10の...

2  Railsでcheck_box_tagを事前に確認できません  ( Cannot precheck check box tag in rails ) 
私はこのようなコードを持っています: <事前> <コード> @all_ratings.each do |rating| = check_box_tag "ratings[#{rating}]", session[:checkbox][rating], :i...

1  Easy CSSカスタマイズのためのHTMLを設計するためのガイドライン  ( Guidelines for designing html for easy css customization ) 
SaaSプロジェクトをしています、そして、私たちは「彼の」WebサイトのためにCSSページをアップロードできるようにします。 (実際には、すべての顧客のサイトは仮想ホスティングを使用して私たちがホストされています)。 CSSを適用できるように、ページのHT...

3  構成データを管理するための最良の方法  ( Best way to manage configuration data ) 

© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有