コーディングルールはグーグルのガイドラインなどたくさんありますが、 最新でよいといわれているものはどれだと思いますか？

Question

コーディングルールはグーグルのガイドラインなどたくさんありますが、
最新でよいといわれているものはどれだと思いますか？

私が知っているのは下記ですが、ほかでもかまいません。

CSS設計の教科書

http://article.enja.io/articles/css-architecture.html

下記は世界で有名なのでしょうか？
https://github.com/kiwanami/CSS-Guidelines

Answer 1

上記の設計の中に書かれている内容はモダンなスタイルですので、
どれも選択にはよいと思います。
しかし、一部sassやlessのようなcssメタ言語を用いたルールも含まれています。
BEMはメタ言語を用いた際でないと使用してもただclass名が長くなるだけであまり意味がありません。
htmlの文書構造もシンプルに書けないと当然cssのネストも深くなります。
また

<h1 id="sitetitle></h1> を h1#siteitle {} とcss中で記述をするのは明らかな設計上のミスです。 sitetitleがh1で必ずしもマークアップするとは限らないからです。

個人的におススメなのはwordpressのデフォルトテーマのマークアップ方法、cssの記述ルールに関しては非常に参考になると思います。
SMACSSやBEMもwebサイトの種類によっては適応しにくい場合もありますので、これが正しいとは一概にいえませんが、なぜそのルールを採用するのがよいか明確な理由があるか考えて記述を行っていくと個人で判断ができるようになると思います。

http://article.enja.io/articles/css-architecture.html
のサイトのcssプリプロセッサより手前に書かれていることはある程度技術のあるコーダーの共通認識であると思います。

Comments

[退会済みユーザー]

ありがとうございます。

下記でデフォルトのテーマを探したのですが、見つかりませんでした。
もしご存知でしたらお教えください。
また下記のような有償テーマもソースコードは完璧に近く参考になるでしょうか？
https://ja.wordpress.org/themes/commercial/

また参考のサイトはまさにCSS設計の教科書と同じですね。

[921138]

https://ja.wordpress.org/themes/twentysixteen/
こちらはwordpressのデフォルトテーマになります。
ブログのようなサイトの構造はマークアップで用意されている要素との相性もよく、手本となります。
企業サイトの場合はどうしても無理やり要素をhtmlの構造に当てはめるわけですから、デザイン上htmlの要素に適応する箇所に悩むことも慣れるまでは多いかもしれません。

[921138]

ご参考に上げて頂いたサイトはheaderやsectionなどのhtml5の要素をdivの代わりに使用しているものも多いので、個人的にはおススメではありません。
またwordpressのテーマを参考にする場合の注意として、wordpressがphp側で吐き出すclass名のルールになっている点は注意が必要です。
そもそも完璧という考え方をやめて、ベター程度に考え柔軟性を持った方がコーダーとして仕事に柔軟に対応でき、信用を得られると思います。
つまり様々な派生系があるのですが、これは駄目といった暗黙の認識がまずあって、あとは要件によって対応とした方がよいです。
規模の大きなサイトほどコーディングルールは最初の内に決めた方がよいと思います。
保守性やチームでの運用、可読性など様々な視点から検証が必要ですので、毎回何かテーマを持ってコーディングに望むとよいと思います。
自分の場合は小規模サイトやLPなどページ数が少ないもので検証したりします。納品後さわらないようなソースであれば、崩れなければ誰も迷惑しないですから。

[退会済みユーザー]

https://ja.wordpress.org/themes/default/の
index.phpを開いた所下記のようなソースが出ました。
ブラウザでは開けませんでした。

<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/

get_header(); ?>

<div id="content" class="narrowcolumn" role="main">

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('Permanent Link to %s', 'kubrick'), the_title_attribute('echo=0')); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time(__('F jS, Y', 'kubrick')) ?> <!-- by <?php the_author() ?> --></small>

<div class="entry">
<?php the_content(__('Read the rest of this entry &raquo;', 'kubrick')); ?>
</div>

<p class="postmetadata"><?php the_tags(__('Tags:', 'kubrick') . ' ', ', ', '<br />'); ?> <?php printf(__('Posted in %s', 'kubrick'), get_the_category_list(', ')); ?> | <?php edit_post_link(__('Edit', 'kubrick'), '', ' | '); ?> <?php comments_popup_link(__('No Comments &#187;', 'kubrick'), __('1 Comment &#187;', 'kubrick'), __('% Comments &#187;', 'kubrick'), '', __('Comments Closed', 'kubrick') ); ?></p>
</div>

<?php endwhile; ?>

<div class="navigation">
<div class="alignleft"><?php next_posts_link(__('&laquo; Older Entries', 'kubrick')) ?></div>
<div class="alignright"><?php previous_posts_link(__('Newer Entries &raquo;', 'kubrick')) ?></div>
</div>

<?php else : ?>

<h2 class="center"><?php _e('Not Found', 'kubrick'); ?></h2>
<p class="center"><?php _e('Sorry, but you are looking for something that isn&#8217;t here.', 'kubrick'); ?></p>
<?php get_search_form(); ?>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

[退会済みユーザー]

WordPress.orgが制作者の下記テンプレートなら、すべて、ちゃんとしたテンプレなので、
phpが絡まない部分は参考になるのですね。

https://ja.wordpress.org/themes/author/wordpressdotorg/

[921138]

phpはサーバー側で処理されますから、phpファイルをそのまま開いても駄目ですよ
https://ja.wordpress.org/themes/author/wordpressdotorg/
はサーバー側で処理されたphpがhtmlを吐き出しています
https://thinkit.co.jp/story/2014/06/05/4879
HPの仕組みのことももう少し勉強しないと駄目ですね

[退会済みユーザー]

サーバサイドのスクリプトなので、WEBサーバ上で処理させるのを忘れていました。
理由は分かりますので、分かっていない訳ではありません。

ただその処理結果では、HTML5のソースとして参考になるかは微妙ですね。
ツイッターブートストラップの方が良いかもしれないですね。

下記はこの認識でよろしいでしょうか？
＞＞＞
WordPress.orgが制作者の下記テンプレートなら、すべて、ちゃんとしたテンプレなので、
phpが絡まない部分は参考になるのですね。

https://ja.wordpress.org/themes/author/wordpressdotorg/