23277


BEMでのクラス名のつけ方を確認して頂きたいのですが、下記でクラス名のつけ方全般に問題はないでしょうか？

（簡易なBEMなので、すべては引き継がずという形を目指しています。）  
タグも間違ってなさそうでしょうか？  
いろいろな方の意見が聞きたいです。

・ソース

[code]

    <div class="wrap-skew1 first-section-skew1">
      <div class="wrap-skew2 first-section-skew2">
        <div class="wrap-inner">
          <section class=section multicolumn ">
        <div class="content-wrap translate3d-to-upper-left ">
        <h2 id="js-about-me " class="heading-primary ">ABOUT&nbsp;&nbsp;ME</h2>
        <p class="paragraph-oneline ">あああああああああああああああああああああああああああああああああああ</p>
        <p>いいいいいいいいいいいいいいいいいいいいいいいいいい。</p>
        </div><!-- /.contents-wrap -->
        <div class="img-wrap translate3d-lower-right ">
        <img class="my-image " src="img/index/myimage.png " alt="自身の写真 ">
        </div>
        </section><!-- /#about -->
        </div>
        </div>
        </div>
    
[/code]

[code]

    下記はinnerにするべきなのでしょうか？
    innerは中身ということですがいまいちはっきりしません。
    <section class=section-wrap multicolumn">
    <div class="content-wrap translate3d-to-upper-left">
    
[/code]

・下記が実際の見た目です。  
<https://jsfiddle.net/80od313c/24/>

[code]

    $(function(){
         // 下記をクリックすると実行される
         $('#drawermenu, .overlay-haikeikurokari, .link-block, .showMenue, .modal-button-wrap').on('click', function() {
          // 下記の要素のセレクタにactiveクラスが足される。.modal-button-wrap__button.activeとなるので、.modal-button-wrap__buttonのみで良い。
          $('.modal-button-wrap__button').toggleClass('active');
               });     
        });
          
    $('.modal-button-wrap__button,.link-block').click(function(){
            //ulをクリックすると、メニューが出たり戻ったりする
            $('#drawermenu').toggleClass('showMenue');//モーダルのクラスを削除して、モーダルボディーを戻す
           });
           $('#drawermenu li').click(function(){
            //ulをクリックすると、メニューが出たり戻ったりする
            $('#drawermenu').toggleClass('showMenue');//モーダルのクラスを削除して、モーダルボディーを戻す
           });
           $(document).on('click', '.overlay-haikeikurokari, #js-drwar-action ,.showMenue',  function(){ 
            //.メニューが出る必要はなく、戻る動きだけ必要な場合
            $('#drawermenu').removeClass('showMenue');//モーダルのクラスを削除して、モーダルボディーを戻す
           });
              
              <!-- drawermenu-blackbackground -->
              $('.modal-button-wrap').click(function(){
             //透明の背景、オーバーレイのhtmlを作る
             $('body').append('<div class="overlay-haikeikurokari"></div>');
             //透明の背景、オーバーレイをフェードイン
             $('.overlay-haikeikurokari').fadeIn('slow');
             //ここをクリックすると黒い背景がフェードアウト
             $('.overlay-haikeikurokari, .close, #drawermenu, .link-block ,.showMenue, .modal-button-wrap__button').click(function(){
                 //透明の背景をフェードアウト
                 $('.overlay-haikeikurokari').fadeOut('slow');
                 // 透明の背景オーバーレイはフェードアウトしてから削除
                 $('.overlay-haikeikurokari').fadeOut('slow', function(){
                   $('.overlay-haikeikurokari').remove();
               });
             });
           });
[/code]

[code]

    /* ---------------------------------------------------------
    MainContent-First
    ----------------------------------------------------------*/
    /* メインコンテンツの背景共通 */
    main {
        font-size: 1.6rem;
    }
    
    .wrap-skew1 {
        transform: skewY(-6deg);
        margin: 0px auto 10%;
        padding: 0px;
        background: rgba( 229, 228, 255, 0.9 );
        /*other-pattern*/
        /*background: rgba( 229, 228, 255, 0.7 );*/
        /*background: linear-gradient(to left bottom, rgba(0, 255, 255, 0.6), rgba(0, 0, 255, 0.6) 15%, rgba(0, 255, 255, 0.6) 33%, rgba(0, 0, 255, 0.6) 49%, rgba(0, 255, 255, 0.6) 67%, rgba(0, 0, 255, 0.6) 84%, rgba(0, 255, 255, 0.6));*/
        text-align: left;
    }
    
    @media (min-width: 640px) {   
    .wrap-skew1 {
        transform: skewY(-5deg);
    }             
    }
    
    @media (min-width: 960px) {   
    .wrap-skew1 {
        transform: skewY(-3.5deg);
        margin: 0px auto 5%;
    }             
    }
    
    .wrap-skew2 {
        transform: skewY(6deg);
        width: 100%;
        margin: 0px auto;
        padding: 0px;
        background: rgba( 190, 250, 255, 0.6 );
        /*background: linear-gradient(to left bottom, rgba(0, 255, 255, 0.1), rgba(0, 0, 255, 0.1) 15%, rgba(0, 255, 255, 0.1) 33%, rgba(0, 0, 255, 0.1) 49%, rgba(0, 255, 255, 0.1) 67%, rgba(0, 0, 255, 0.1) 84%, rgba(0, 255, 255, 0.1));*/
    }
    
    @media (min-width: 640px) {   
    .wrap-skew2 {
        transform: skewY(5deg);
    }             
    }
    
    @media (min-width: 960px) {   
    .wrap-skew2 {
        transform: skewY(3.5deg);
    }             
    }
    
    /* メインコンテンツのパッディング */
    .wrap-content {
        padding: 15% 8%;
        transform: skewY(0deg);
    }
    
    @media (min-width: 640px) {   
    .wrap-content {
        padding: 11% 11%;
    }             
    }
    
    @media (min-width: 960px) {   
    .wrap-content {
        padding: 9% 11%;
    }             
    }
    /* /メインコンテンツのパッディング */
    
    /* メインコンテンツの背景 */
    .first-section-skew1 {
        margin-top: 5%;
        padding: 0px;
    }
    
    /* 見出しの共通クラス */
    .common-heading {
        font-size: 2.8rem;
        text-shadow: 
                    1px 1px rgba(0, 0, 0, .2),
                    2px 2px rgba(0, 0, 0, .1),
                    3px 3px rgba(0, 0, 0, .1),
                    4px 4px rgba(0, 0, 0, .05),
                    5px 5px rgba(0, 0, 0, .05),
                    6px 6px rgba(0, 0, 0, .05);
    }
    
    
    
    /* ---------------------------------------------------------
    Inquery
    ----------------------------------------------------------*/
    .inquiry {
        position: relative;
        padding: 34rem 0 35.5rem 0;
        width : 100%;
        background: url(../img/common-img/inquery-back.png) no-repeat;
        background-position: center center;
        background-size: cover;
    }
    
    @media (min-width: 960px) {   
    .inquiry {
        padding: 53rem 0 28rem 0;
    }           
    }
    
    /*入力フォーム一覧の位地*/
    .inquiry-wrap {
        position: absolute;
        top: 7.6%;
        left: 8%;
    }
    
    @media (min-width: 640px) {   
    .inquiry-wrap {
        top: 7.6%;
        left: 11%;
    }      
    }
    
    @media (min-width: 960px) {   
    .inquiry-wrap {
        position: absolute;
        top: 10.3%;
        left: 11%;
    }           
    }
    
    .inquiry__heading {
        text-shadow: 
                    1px 1px rgba(0, 0, 0, .2),
                    2px 2px rgba(0, 0, 0, .1),
                    3px 3px rgba(0, 0, 0, .1),
                    4px 4px rgba(0, 0, 0, .05),
                    5px 5px rgba(0, 0, 0, .05),
                    6px 6px rgba(0, 0, 0, .05)
                    ;
    }
    
    .inquiry__heading,.inquiry-form dt {
        color: white;
    }
    
    .inquiry-form dt {
        text-shadow:
                    0px 0px 10px #fff,
                    0px 0px 10px #fff,
                    0px 0px 10px #fff,
                    0px 0px 10px #fff,
                    0px 0px 10px #fff,
                    0px 0px 10px #fff,
                    0px 0px 10px #fff,
                    0px 0px 10px #fff,
                    0px 0px 10px #fff,
                    2px 2px 2px rgba(0,0,0,.9);
        color: #000;
        font-weight: bold;
    }
    
    /*フォーム～ボタンまでの横幅、行間一括指定、個人情報ボックス以外*/
    .inquiry-form__input-box input,#inquiry-form_body,.inquiry__submit-btn {
        width: 90%;
        line-height: 2;
        border-style: none;/*選択時の枠線を無くす*/
    }
    
    @media (min-width: 960px) {   
    .inquiry-form__input-box input,#inquiry-form_body,.inquiry__submit-btn {
        width: 40%;
    }            
    }
    
    .inquiry-form__input-box,.inquiry-form__input-box_kind_textarea {
        opacity: 0.7;
    }
    
    .inquiry-form__input-box {
        margin-bottom: 1rem;
    }
    
    .inquiry-form__input-box_kind_textarea #inquiry-form_body {
        margin-bottom: 2rem;
        resize: horizontal;/*横のみリサイズ可能*/
    }
    
    #inquiry-form_body {
        height: 5rem;
    }
    
    @media (min-width: 960px) {   
    #inquiry-form_body {
        height: 10rem;
    }            
    }
    
    .privacy {
        border: 0.1rem solid #03AFFF;
        width: 78%;
        padding: 2.3rem 3rem 0 3rem;
        height: 12rem;
        line-height: 2;
        overflow-y: scroll;
        background: #fff;
        opacity: 0.7;
    }
    
    @media (min-width: 960px) {   
    .privacy {
        width: 37%;
    }            
    }
    
    .inquiry__submit-btn {
        display: block;
        margin-top: 4rem;
        height: 5.5rem;
        background: rgb(0, 239, 123);
        color: #fff;
        font-size: 2.7rem;
        font-weight: bold;
        letter-spacing: 2px;
        line-height: 5.5rem;
        text-align: center;
        text-shadow: 1px 1px 0px #000,
                     -1px 1px 0px #000,
                     1px -1px 0px #000,
                     -1px -1px 0px #000;
        box-shadow: 2px 2px 2px rgba(0,0,0,.9);
    }
    
    
    
    /* ---------------------------------------------------------
    Footer
    ----------------------------------------------------------*/
    .footer-common {
        padding: 8% 10%;
        box-shadow: 0rem 0.6rem 0.6rem -0.6rem rgba(0,0,0,0.9) inset; 
        text-align: center;
        font-size: 1.6rem;
        behavior: url(./plugin/PIE.htc);
        /*background: transparent linear-gradient(to right bottom, rgba(0, 255, 255, 0.2), rgba(0, 0, 255, 0.2) 15%, rgba(0, 255, 255, 0.2) 33%, rgba(0, 0, 255, 0.2) 49%, rgba(0, 255, 255, 0.2) 67%, rgba(0, 0, 255, 0.2) 84%, rgba(0, 255, 255, 0.2)) repeat scroll 0% 0%;*/
        background: transparent linear-gradient(to right bottom, rgba(0, 255, 255, 0.4), rgba(0, 0, 255, 0.4) 15%, rgba(0, 255, 255, 0.4) 33%, rgba(0, 0, 255, 0.4) 49%, rgba(0, 255, 255, 0.4) 67%, rgba(0, 0, 255, 0.4) 84%, rgba(0, 255, 255, 0.4)) repeat scroll 0% 0%;    
        /*background: transparent linear-gradient(to right bottom, rgba(0, 255, 255, 1), rgba(0, 0, 255, 1) 15%, rgba(0, 255, 255, 1) 33%, rgba(0, 0, 255, 1) 49%, rgba(0, 255, 255, 1) 67%, rgba(0, 0, 255, 1) 84%, rgba(0, 255, 255, 1)) repeat scroll 0% 0%;*/
        /*background-image: linear-gradient(to right, rgb(52, 152, 219) 25%, rgb(41, 128, 185) 100%);*/
        /*-pie-background: linear-gradient(#8Fd537, #6Fb517);*/
    }
    
    @media (min-width: 960px) {
    .footer-common {
        padding: 6% 10%;
        box-shadow: 0rem 0.6rem 0.6rem -0.6rem rgba(0,0,0,0.9) inset; 
    }
    }
    
    @media (min-width: 960px) {
    .footer-common {
        padding: 3.5% 10%;
        box-shadow: 0rem 0.6rem 0.6rem -0.6rem rgba(0,0,0,0.9) inset; 
    }
    }
    
    /* address */
    .address {
        display: inline;
        font-size: 1.8rem;
        text-shadow: 1px 1px 1px rgba(0,0,0,.9);
        line-height: 1.5;/* Social-buttonとアドレスの間の隙間 */
    }
    
    @media (min-width: 640px) {
    .address {
            font-size: 2.5rem;
    }
    }
    
    @media (min-width: 960px) {
    .address {
            font-size: 2.7rem;
    }
    }
    
    /* ボタンやアドレスの色-はヘッダーと共通なのでヘッダーにある */
    .address__tel,.address__mail {
        color: #00ff8a;
    }
    /* address */
    
    /* Social-buttonのWEBfontの共通CSSはheaderにある */
    
    .social-btn {
        display: inline; 
        line-height: .9;/* Social-buttonとアドレスの間の隙間 */
        text-shadow: .1rem .1rem .2rem rgba(0,0,0,.9);
    }
    /* /Social-button */
    
    /* gototop-footer */
    [id="gototop"] i,[id="gototop"] a:visited  {
        font-size: 7rem!important;
        text-shadow: .1rem .1rem .2rem rgba(0,0,0,.9);
        color: #00bbff;
    }
    
    @media (min-width: 960px) {
        [id="gototop"] {
        width: 9rem;
        margin: auto;
    }
    }
    
    [id="gototop"] i,[id="gototop"] a:visited {
        font-size: 7rem!important;
        text-shadow: .1rem .1rem .2rem rgba(0,0,0,.9);
        color: #00bbff;
    }
    
    @media (min-width: 960px) {
        [id="gototop"] i,[id="gototop"] a:visited {
        font-size: 9rem!important;
        text-shadow: .1rem .1rem .2rem rgba(0,0,0,.9);
    }
    }
    
    
    
    
    /* 左から出てくるdrawer-menu */
    [id="drawermenu"] {
        z-index: 300;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        overflow-y: hidden;
        padding-top: 0rem;
        text-align: center;
        cursor: pointer;
        margin-left: -100%;
        transition-propety:all;
        transition-duration:1s;
    }
    
    @media (min-width: 960px) {
        [id="drawermenu"] {
        padding-top: 2.8rem;
    }    
    }
    
    [id="drawermenu"] ul {
        overflow-y: scroll;
        overflow-x: scroll;
        width: 105%;/* 横のスクロールバーをはみ出して、上記のhiddenで隠す */
        height: 101%;/* 下のスクロールバー */
    }
    
    [id="drawermenu"] li {
        margin-bottom: 0.2rem;
        background: rgba( 229, 228, 255, 0.3 ); 
    }
    
    [id="drawermenu"] li a {
        height: 6rem;
        line-height: 6rem;
        margin: 0 auto;
        color: #fff;
        font-size: 2rem;
        text-decoration: none;
        text-shadow: 1px 1px 1px rgba(0,0,0,.9);
    }
    
    @media (min-width: 960px) {
        [id="drawermenu"] li a {
        font-size: 2.5rem;
    }
    }
    
    .link-block {
        display: block;
        z-index: 99999;
    }
    
    /* .modal-button-wrap__buttonをクリックした際に加えられる */
    .showMenue {
        margin-left: 0%;
    }
    /* /.modal-button-wrap__buttonをクリックした際に加えられる */
    /* 左から出てくるdrawer-menu */
    
    /* modalwindow-button-white-threeborder */
    /*モーダルウィンドウのボタンの囲い*/
    .modal-button-wrap {
        position: fixed;
        top: 2%;
        right: 3%;
        z-index: 9999;
    }
    
    @media (min-width: 960px) {
    .modal-button-wrap {
        top: 5%;
        right: 5%;
    }    
    }
    
    /*モーダルウィンドウのボタン*/
    /* shadow */
    .modal-button-wrap__border {
        box-shadow: 0 0.2rem 0.2rem rgba(0,0,0,.9);
    }
    /* /shadow */
    
    .modal-button-wrap__button,
    .modal-button-wrap__button span,.overlay-haikeikurokari {
        display: inline-block;
        transition: all .4s;
        box-sizing: border-box;
    }
    
    /*button-size*/
    .modal-button-wrap__button,.overlay-haikeikurokari {
        position: relative;
        width: 5rem;
        height: 4.4rem;
    }
    /* /button-size */
    
    .modal-button-wrap__button span,.overlay-haikeikurokari span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: #fff;
        border-radius: 4px;
    }
    
    /*　threewhiteline　*/
    .modal-button-wrap__button span:nth-of-type(1) {
        top: 0;
    }
    .modal-button-wrap__button span:nth-of-type(2) {
        top: 20px;
    }
    .modal-button-wrap__button span:nth-of-type(3) {
        bottom: 0;
    }
    /*　/threewhiteline　*/
    
    /*drawermenuのボタンのアニメーション*/
    .modal-button-wrap__button.active span:nth-of-type(1) {
        -webkit-transform: translateY(20px) rotate(-315deg);
        transform: translateY(20px) rotate(-315deg);
    }
    
    .modal-button-wrap__button.active span:nth-of-type(2) {
        opacity: 0;
    }
    
    .modal-button-wrap__button.active span:nth-of-type(3) {
        -webkit-transform: translateY(-20px) rotate(315deg);
        transform: translateY(-20px) rotate(315deg);
    }
    
    /* drawermenu-overlay-半透明のグレーバック */
    /* lightbox-overlay-半透明のグレーバックは別のcss（.overlay） */   
    .overlay-haikeikurokari {
        z-index: 100;
        display:none;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,.4);
        transition: all 3.3s;
    }
    
    .drawermenu__social-btn {
        font-size: 6.5rem!important;     
    }
    
    .drawermenu__material-icons {
        font-size: 7rem;    
    }
    
    .material-icons_large {
        font-size: 8rem;
        line-height: 0.75;
    }
    /* /drawermenu　*/
    
    /*Reset Stylesheet*/
    /* 
    html5doctor.com Reset Stylesheet
    v1.6.1
    Last Updated: 2010-09-17
    Author: Richard Clark - http://richclarkdesign.com 
    Twitter: @rich_clark
    */
    
    html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code,
    del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var,
    b, i,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
    }
    
    body {
        line-height:1;
    }
    
    article,aside,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section { 
     display:block;
    }
    
    ul {
        list-style:none;
    }
    
    blockquote, q {
        quotes:none;
    }
    
    blockquote:before, blockquote:after,
    q:before, q:after {
        content:'';
        content:none;
    }
    
    a {
        margin:0;
        padding:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
        text-decoration: none;
    }
    
    /* change colours to suit your needs */
    ins {
        background-color:#ff9;
        color:#000;
        text-decoration:none;
    }
    
    /* change colours to suit your needs */
    mark {
        background-color:#ff9;
        color:#000; 
        font-style:italic;
        font-weight:bold;
    }
    
    del {
        text-decoration: line-through;
    }
    
    abbr[title], dfn[title] {
        border-bottom:1px dotted;
        cursor:help;
    }
    
    table {
        border-collapse:collapse;
        border-spacing:0;
    }
    
    /* change border colour to suit your needs */
    hr {
        display:block;
        height:1px;
        border:0;   
        border-top:1px solid #cccccc;
        margin:1em 0;
        padding:0;
    }
    
    input, select {
        vertical-align:middle;
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <div class="wrap-skew1 first-section-skew1">
                            <div class="wrap-skew2 first-section-skew2">
                                <div class="wrap-content">  
                                    <section class="section-wrap multicolumn">
                                        <div class="content-wrap translate3d-to-upper-left">
                                            <h2 id="js-about-me" class="heading-primary">ABOUT&nbsp;&nbsp;ME</h2>
                                            <p class="paragraph-oneline">あああああああああああああああああああああああああああああああああああ</p>
    <p>いいいいいいいいいいいいいいいいいいいいいいいいいい。</p>
                                        </div><!-- /.contents-wrap -->
                                        <div class="img-wrap translate3d-lower-right">
                                            <img class="my-image" src="img/index/myimage.png" alt="自身の写真">
                                        </div>
                                    </section><!-- /#about -->
                                </div>
                            </div>
                        </div>
    
    
    
    
    <!-- drawermenu -->
        <nav>
         <div id="drawermenu">
         <ul>
          <li class="link-block">
           <a class='header__social-btn drawermenu__social-btn symbol animation-hover action-hover' href="https://plus.google.com/share?url=" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe039;'></a>
           
                          <a class='header__social-btn drawermenu__social-btn symbol animation-hover action-hover' href="http://www.facebook.com/share.php?u=" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe027;'></a>
                    
                          <a class='header__social-btn drawermenu__social-btn symbol animation-hover action-hover' href="http://twitter.com/share?url=" title='&#xe086;'></a>                 
          </li>
          <li><a class="link-block action-hover animation-hover" href="#js-about-me">ABOUTME</a></li>
          <li><a class="link-block action-hover animation-hover" href="#js-gallary">GALLARY</a></li>
          <li><a class="link-block action-hover animation-hover" href="#js-gmap">MAP</a></li>
          <li><a class="link-block action-hover animation-hover" href="#js-inquiry">CONTACT</a></li>
          <li id="js-drwar-action"><a class="link-block drawermenu__gototop action-hover animation-hover" href="#top"><i class="material-icons material-icons_large action-hover animation-hover">&#xE5CE;</i></a></li>
          <li><a class="link-block action-hover animation-hover" href="">TOPPAGE</a></li>
          <li><a class="link-block action-hover animation-hover" href="">BLOG</a></li>
         </ul>
              </div>
             </nav>
             <!-- /drawermenu -->
              
              
              
              <!-- drawermenu-button -->
       <div class="modal-button-wrap">
        <a class="animation-hover action-hover modal-button-wrap__button kuruttosuru">
         <span class="modal-button-wrap__border"></span><!-- border -->
         <span class="modal-button-wrap__border"></span><!-- border -->
         <span class="modal-button-wrap__border"></span><!-- border -->
        </a>
       </div>
[/code]

また、BEMのclass名は「Block_key_value」で表します。とあるのですが、  
keyがvalue＝色が赤＝color_redということでしょうか？  
主語と目的語ということでしょうか？  
よくわかりません。

<https://app.codegrid.net/entry/bem-basic-1>


CC BY-SA 4.0
2016-03-19T07:43:12.830
23273
2019-12-13T19:28:55.703
2019-12-13T19:28:55.703
32986
14320
question
css
BEMでのクラス名のつけ方を確認して頂きたいのですが、下記でクラス名のつけ方全般に問題はないでしょうか？


コメントする前にサンプルコードを修正しておきますね。

[code]

    <div class="wrap-skew1 first-section-skew1">
      <div class="wrap-skew2 first-section-skew2">
        <div class="wrap-inner">
          <section class="section multicolumn">
            <div class="content-wrap translate3d-to-upper-left">
              <h2 id="js-about-me" class="heading-primary">ABOUT ME</h2>
              <p class="paragraph-oneline">あああああああああああああああああああああああああああああああああああ</p>
              <p>いいいいいいいいいいいいいいいいいいいいいいいいいい。</p>
            </div>
            <div class="img-wrap translate3d-lower-right">
              <img class="my-image" src="img/index/myimage.png" alt="自身の写真">
            </div>
          </section>
        </div>
      </div>
    </div>
    
[/code]

サンプルコードがOOCSS（後述）ぽく見えるので、BEMについて誤解があるように感じられたので補足します。

まず、BEMは「Block（親要素）」「Element（子要素）」「Modifier（状態）」の頭文字を取った記法のことです。class名はBlockとElementとの間は__で繋げ、Modifierは
--で繋げます。

なのでclass名は`.親要素__子要素__孫要素__…`と続いていきます。どこかの要素が少し変わる場合は`.親要素--
状態変化__子要素`という書き方になります。

なお、このModifierについて、提示されたURLでは_で繋げて表記されていますが、一般的には--で繋げて、長くなる場合は_で区切ります。

例えば「エラーを表示するボックス」はボックスを使い回すために`.box`とでもしておきましょう。エラーであるを主張したいので`.box--
error`にします。あとは中にある要素次第ですが、アイコンがあるのであれば`.box--error__icon`

ついで言えばModifierは必ずしもBlockにつける必要はないので`.box__icon--cat_…`のようにElementにつけることができます。

> また、BEMのclass名は「Block_key_value」で表します。とあるのですが、  
>  keyがvalue＝色が赤＝color_redということでしょうか？

その認識で間違いではありませんが、red自体が赤い色を示しているのでcolor_redは少し冗長的に感じます。強いて言うなら_redでしょうか。先の説明で書き換えるなら
--redかなと。

だんだん書いてて説明が面倒になってきたので「[BEMという命名規則とSass
3.3の新しい記法](http://blog.ruedap.com/2013/10/29/block-element-
modifier)」も参考にすると理解が進むと思います。

（ここから先は少し自己流が混ざっているのと、先のコードを読むのが大変なのである程度無視して解説しています。）

それを踏まえた上で内側の要素を整理すると、

[code]

    <section class="profile">
      <h2 class="profile__title">ABOUT ME</h2>
      <p class="profile__paragraph--lead">「あ」が並ぶ段落</p>
      <p　class="profile__paragraph">「い」が並ぶ段落</p>
      <img class="profile__image">
    </section>
    
[/code]

このようになります。ただ、これだと少し.profile__paragraphが冗長的なので、

[code]

    <section class="profile">
      <h2 class="profile__title">ABOUT ME</h2>
      <p class="profile__lead">「あ」が並ぶ段落</p>
      <p>「い」が並ぶ段落</p>
      <img class="profile__image">
    </section>
    
[/code]

という書き方もできます。人によるところがあるので好みでいいでしょう。

そして、外側に装飾があるようなので使いまわせることを前提で書き換えると、

[code]

    <div class="frame">
      <div class="frame__inframe">
        <div class="frame__inframe__content">
        </div>
      </div>
    </div>
    
[/code]

こうでしょうか。ちょっといいclass名が思いつきませんでしたが概ねこんな感じでしょう。

合わせると、

[code]

    <div class="frame">
      <div class="frame__inframe">
        <div class="frame__inframe__content">
          <section class="profile">
            <h2 class="profile__title">ABOUT ME</h2>
            <p class="profile__lead">「あ」が並ぶ段落</p>
            <p>「い」が並ぶ段落</p>
            <img class="profile__image">
          </section>
        </div>
      </div>
    </div>
    
[/code]

こんな感じ。

ただ、投稿主が望むCSSの書き方がよくわからないので「[OOCSSとSass](http://takazudo.github.io/blog/entry/2012-12-10-oocsssass.html)」や「[SMACSS
読んだ  
](http://chroma.hatenablog.com/entry/2013/07/22/120818)」の２つを読んでみることをおすすめします。その上で己が目指すCSSを書くと良いでしょう。


CC BY-SA 3.0
2016-03-19T11:21:34.880
23277
2016-03-19T11:21:34.880
4960
23273
answer


前半何言ってるのかよくわからないので後半だけコメントしますね。

> frameというクラス名を採用されていますが、wrapよりそちらの方が現場では多いのですか？

特に意味はありません。つけるとしたらwrapやwrapperが多いですが、制作するところによるでしょう。

> `<section class="profile">` とされていますが、
> sectionタグは絶対に章節に使われるので、下記で常に良いと考えられないのでしょうか？

sectionはマークアップするためのタグとしてHTML5で登場しました。レイアウトするタグとしてsectionではなくdivを推奨されますが、レイアウト目的でなければ問題ありません。

あとその.section作る意味がわからないです。意味的には同じかと。

> またなぜprofileというクラス名を使われているのでしょうか？

.profileは内側のスタイリングです。もし.frameに記事を入れたい場合は代わりに.articleで括れば可読性が上がります。

.profileの命名について言っているのであれば、h2タグに「ABOUT ME」があったから連想しただけです。

もし、BEM特有のclassの冗長化が気になるようであればわざわざBEMで書かずOOCSSで書くべきだと思われます。


CC BY-SA 3.0
2016-03-20T06:05:12.037
23293
2016-03-20T06:05:12.037
4960
23273
answer