10周年のSPコンテンツ!
7
えんじに🐈にゃーん @uupaa
(ε・◇・)з だらだら書いたよー http://t.co/fK9KaHRq 「CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー」
azu @azu_re
ハイホンは単語の区切り、アンダーバーは単語の結合。 word-word-word ダブルクリックで単語を選択するのは自然。
think49 @think49
@azu_re Googleのブログか何かで読んだ記憶がありますね。「URIの単語の区切りには "-" を使うべきである」という主張だった気が。
azu @azu_re
$("#" + location.hash);をしにくくするためにキャメルケースを使いましょう。とか
think49 @think49
@uupaa 単語をハイフン(-)で区切るのは属性セレクタ([att|=val])との相性が良かったりします。http://t.co/nE3eiLpR 属性セレクタにはアンダースコア(_)を区切りとするセレクタがありません。
えんじに🐈にゃーん @uupaa
@think49 (ε・◇・)з E[key|="value"] 形式って、実際使うのって lang ぐらいなんだよねー って思って見逃してたー
think49 @think49
@uupaa JavaScripter としては id="hoge-foo" でグローバル汚染を回避できる(ECMAScript 規定により "-" を変数名に含めることが出来ない)のは大きいですね。 #HTML5 で取り込まれた仕様なので、この対策も現実味を帯びてきました。
えんじに🐈にゃーん @uupaa
@think49 (ε・◇・)з デザイナーさんやコーダーさんのかなりの人が<div id="hoge">でwindow.hoge から触れたり<div id="font-size">でwindow["font-size"]が出来ちゃうの知らなかったりする気もしてるんだ~ #再送
think49 @think49
@think49 @uupaa グローバル汚染する仕様のURIは http://t.co/NU506eqM ですね。#HTML5 も何でこんな仕様を取り込んだのやら…。
えんじに🐈にゃーん @uupaa
@think49 (ε・◇・)з たしか Firefox 3.6 の時点では <div id="hoge"> で window.hoge にアクセスできなかったはず~ (ちょとFirefox9 でやってみます)
think49 @think49
@uupaa 私の感覚ではそこそこ知られてしまっている印象ですねー。Q&Aサイトでもちらほら見ます。多分、日本語の解説サイトからコピペしてJavaScriptをよく理解せずに使ってしまっているパターンが…。
えんじに🐈にゃーん @uupaa
@think49 (ε・◇・)з Firefox 9 でも Firefox 3.6 と同じく <div id="hoge"> で window.hoge できてませんでしたー
toku_bass @toku_bass
@uupaa ほとんど運用しなかったのですが、クラス名のプレフィックスにjsって書いたことはあります。デザイナがこのクラス名をそのまま使うのは避けて、新しいクラス名を追加してもらったほうがいいですよね。
えんじに🐈にゃーん @uupaa
(ε・◇・)з 恐らく明日の朝になると、「CSSはハイフンがー ハイフンがー」と叫ぶ人達にフルボッコにされてそうだけど、ボクはそれでもええーん >< やで
てらまこ @teramako
できちゃうのは、 <form name="body"/> document.body じゃなかったっけ... id は無理だと思う
えんじに🐈にゃーん @uupaa
(ε・◇・)з なんか一杯書きたかっただけやねん
えんじに🐈にゃーん @uupaa
@toku_bass (ε・◇・)з ですね。なんか共通ルールとかあると助かるんですけどね~ いつまで待ってもそういう風な流れがないので、ボクも勝手な事いっちゃってますけども
shogo ohta @os0x
@teramako Firefoxでも互換モードならidがグローバルになりますよ
てらまこ @teramako
@os0x なるほど、互換モードがありましたか...orz
think49 @think49
@uupaa 確認しましたー。Fx9 だけ未実装ですね。(OK: GC16, IE8, Op11.60 / Fx9 NG) http://t.co/vTjsDEXv
think49 @think49
@uupaa あと、window['hoge-foo'] は確認した全ての実装で参照できました。ごめんなさい。hoge-foo による参照は当然のことながら出来ないですね。
think49 @think49
…と、互換モードがありましたか。
えんじに🐈にゃーん @uupaa
(ε・◇・)з さすがに E:first-child {...} とかも無しだバーローって感じには考えてないので、追記しとかないと…
げこP @GeckoTang
<form name="form" id="form" class="form" data-form="form"></form>
think49 @think49
URL云々の件は http://t.co/WMqvbBC9 小文字のみを許容する慣習のあるURLの規定をidの命名規則に持ってくるのは無理があったと反省。
残りを読む(28)

コメント

Tomoki UDA @t_uda 2012年1月23日
form の name 属性とか、古いブラウザで id 汚染されるのは知っていたけれど、互換モードだと今のブラウザでも id 汚染されたりするのか。知らなかった。何にせよ class や id にはアンダーバーでなくてハイフンを使って欲しいな。
ログインして広告を非表示にする
ログインして広告を非表示にする