1

Tenho que alterar uma base de código responsável por gerar relatórios PDF utilizando a ferramenta Jinja2. Para tanto, preciso alterar documentos HTML e CSS. Para os primeiros, minha preocupação é com a convenção de nomes para div's. De acordo com BEM, eu deveria utilizar hífen para nomear as div's. Então, como proceder para nomear div's aninhadas? A lógica do código a seguir utiliza espaços("content" -> "content info").

Para o segundo, preciso estruturar o relatório de forma a centralizar a tabela("content info") e, logo abaixo, ter os gráficos("pie_week_chart" e "pie_project_chart") com o mesmo tamanho e lado a lado.

Essa base de código é legada e foi gerada automaticamente. Portanto, minha intenção é reescrevê-la da forma mais simples possível.

Código atual:

HTML:

<div class='description'>
        <div class="municipality">{{ municipality }}</div>
</div>
<div class="summary">
        <div class="content info">
            <TABLE border="0" class="table0">
                <TR>
                    <TD><P class="td3 p9 ft9">Resumo semana de {{ start_date }} até {{ end_date }}</P></TD>
                    <TD><P class="td3 p9 ft9">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD><P class="td5 p5 ft0">Prof. Participantes</P></TD>
                    <TD><P class="td6 p6 ft0">{{ professores_participantes }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="td5 p5 ft0">Prof. Avaliaram</P></TD>
                    <TD><P class="td6 p6 ft0">{{ professores_q_avaliaram }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="td5 p5 ft0">Avaliações Realizadas</P></TD>
                    <TD><P class="td6 p6 ft0">{{ avaliacoes_realizadas }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="td3 p5 ft11">Prof. que não avaliaram</P></TD>
                    <TD><P class="td4 p6 ft11">{{ professores_q_nao_avaliaram }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="tr8 td0 p2 ft13">&nbsp;</P></TD>
                    <TD><P class="tr8 td1 p2 ft13">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD><P class="td3 p9 ft9">Uso Semanal</P></TD>
                    <TD><P class="td3 p9 ft9">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD><P class="td5 p5 ft0">Prof. dentro do esperado</P></TD>
                    <TD><P class="td6 p6 ft0">{{ prof_ok }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="td3 p5 ft11">Prof. fora do esperado</P></TD>
                    <TD><P class="td4 p6 ft11">{{ prof_n_ok }}</P></TD>
                </TR>
            </TABLE>  
        </div>
        <div class="content presentation">
            <div class="content presentation week">
                {{ pie_week_chart }}
            </div>
            <div class="content presentation project">
                {{ pie_project_chart }}
            </div>
        </div>
</div>

CSS:

* {
    box-sizing: border-box;
}

/* Create two unequal columns that floats next to each other */
.content {
    float: left;
}

.info {
  width: 60%;
}

.chart {
  width: 40%;
}

/* Clear floats after the columns */
.summary:after {
    content: "";
    display: table; 
    clear: both;
}

.content_chart {
    display: inline-block;
    height: auto; 
    width: auto;
    vertical-align: middle;
    max-width: 100%;
}

@media screen {
    div.report_name {
         display: none; 
    }
}
@media print {

    h1 {
      page-break-before: always;
    }

    h1, h2, h3, h4, h5 {
        page-break-after: avoid;
    }       

    figure {
      page-break-inside: avoid;
    }

    div#footer {
        position: fixed;
        bottom: -0.8cm;
        right: 0px;

        text-transform:uppercase;
        font: 12px 'Calibri';
    }

}

img.resize {
  ;
}

.former_border{border-top: #a6a6a6 1px solid;padding: 2px;margin: 0px;vertical-align: top;}

.dclr {clear:both;float:none;height:1px;margin:0px;padding:0px;overflow:hidden;}

.ft0{font: 14px 'Calibri';line-height: 19px;}
.ft1{font: 14px 'Calibri';line-height: 15px;}
.ft2{font: bold 14px 'Calibri';line-height: 29px;}
.ft3{font: 14px 'Calibri';line-height: 1px;}
.ft4{font: bold 14px 'Calibri';color: #595959;line-height: 19px;}
.ft5{font: 14px 'Calibri';line-height: 6px;}
.ft6{font: 14px 'Calibri';line-height: 19px;}
.ft7{font: 14px 'Calibri';line-height: 22px;}
.ft8{font: 14px 'Calibri';line-height: 17px;}
.ft9{font: bold 14px 'Calibri';line-height: 19px;}
.ft10{font: bold 14px 'Calibri';color: #404040;line-height: 19px;}
.ft11{font: bold 14px 'Calibri';color: #ff0000;line-height: 19px;}
.ft12{font: 14px 'Calibri';line-height: 18px;}
.ft13{font: 14px 'Calibri';line-height: 8px;}
.ft14{font: bold 14px 'Calibri';line-height: 15px;}
.ft15{font: bold 14px 'Calibri';line-height: 14px;}
.ft16{font: 14px 'Calibri';line-height: 9px;}
.ft17{font: 14px 'Calibri';line-height: 14px;}
.ft18{font: bold 14px 'Calibri';color: #808080;line-height: 14px;}
.ft19{font: 14px 'Calibri';line-height: 13px;}

.p0{text-align: left;padding-left: 2px;margin-top: 0px;margin-bottom: 0px;}
.p1{text-align: left;padding-left: 4px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p2{text-align: left;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p3{text-align: left;padding-left: 129px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p4{text-align: left;padding-left: 3px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p5{text-align: left;padding-left: 3px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p6{text-align: right;padding-right: 3px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p7{text-align: right;padding-right: 238px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p8{text-align: right;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p9{text-align: left;padding-left: 150px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p10{text-align: left;padding-left: 75px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p11{text-align: center;padding-right: 21px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p12{text-align: center;padding-right: 14px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p13{text-align: center;padding-right: 10px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p14{text-align: center;padding-right: 6px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p15{text-align: center;padding-right: 15px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p16{text-align: left;padding-left: 14px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p17{text-align: center;padding-right: 18px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p18{text-align: center;padding-right: 9px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}

.td0{padding: 0px;margin: 0px;vertical-align: bottom;}
.td1{padding: 0px;margin: 0px;vertical-align: bottom;}
.td2{padding: 0px;margin: 0px;vertical-align: bottom;}
.td3{border-bottom: #000000 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td4{border-bottom: #000000 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td5{border-bottom: #a6a6a6 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td6{border-bottom: #a6a6a6 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td7{padding: 0px;margin: 0px;vertical-align: bottom;}
.td8{padding: 0px;margin: 0px;vertical-align: bottom;}
.td9{padding: 0px;margin: 0px;vertical-align: bottom;}
.td10{padding: 0px;margin: 0px;vertical-align: bottom;}
.td11{padding: 0px;margin: 0px;vertical-align: bottom;}
.td12{padding: 0px;margin: 0px;vertical-align: bottom;}
.td13{padding: 0px;margin: 0px;vertical-align: bottom;}
.td14{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td15{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td16{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td17{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td18{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td19{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td20{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td21{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td22{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td23{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td24{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td25{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td26{padding: 0px;margin: 0px;vertical-align: bottom;}
.td27{padding: 0px;margin: 0px;vertical-align: bottom;}

.tr0{height: 30px;}
.tr1{height: 36px;}
.tr2{height: 6px;}
.tr3{height: 19px;}
.tr4{height: 25px;}
.tr5{height: 23px;}
.tr6{height: 17px;}
.tr7{height: 21px;}
.tr8{height: 39px;}
.tr9{height: 34px;}
.tr10{height: 20px;}
.tr11{height: 18px;}
.tr12{height: 8px;}
.tr13{height: 31px;}
.tr14{height: 16px;}
.tr15{height: 9px;}
.tr16{height: 14px;}

.t0{margin-top: 13px;font: 16px 'Calibri';border-spacing: 0;background-color: white;}
.t1{margin-top: 15px;font: 12px 'Calibri';}
.t2{font: 11px 'Calibri';}
2
  • Não sei se entendi bem... no final das contas qual é a sua dúvida? Como usar BEM? Ou algo com esse "grid" feito com table?
    – hugocsl
    Commented 3/10/2018 às 18:14
  • Sim, minha dúvida é com os dois. Gostaria de saber como utilizar a convenção para nomear minhas div's e como posicionar os elementos da forma descrita Commented 3/10/2018 às 18:15

1 Resposta 1

1

Sobre a tabela vc pode fazer com que ele ocupe 100% da largura do container em que ela está dentro, depois disso vc determina que ela vai dividir as duas colunas com 50% pra cada uma.

Sobre o BEM, não tem muito segredo, basta vc seguir o que diz a documentação.

.form (elemento pai)
.form__field (elemento filho)
.form__field--first (elemento filho modificado)

Por exemplo para fazer o CSS da tabela eu fiz dessa forma.

.info {
  width: 60%;
}
.info .info__table {
    width: 100%;
    table-layout: fixed;
}

Uma coisa que eu reparei no seu código que acredito não ser uma boa prática com relação ao BEM, é colocar estilos direito para um tipo de tag, tipo h1, h2, h3, h4, h5 { css } ou figure { css }, para escrever CSS na metodologia BEM acho que isso não seria recomendado...

Vaja como ficou o seu código com a tabela ajustada.

* {
    box-sizing: border-box;
}

/* Create two unequal columns that floats next to each other */
.content {
    float: left;
}

.info {
  width: 60%;
}
.info .info__table {
    width: 100%;
    table-layout: fixed;
}

.chart {
  width: 40%;
}

/* Clear floats after the columns */
.summary:after {
    content: "";
    display: table; 
    clear: both;
}

.content_chart {
    display: inline-block;
    height: auto; 
    width: auto;
    vertical-align: middle;
    max-width: 100%;
}

@media screen {
    div.report_name {
         display: none; 
    }
}
@media print {

    h1 {
      page-break-before: always;
    }

    h1, h2, h3, h4, h5 {
        page-break-after: avoid;
    }       

    figure {
      page-break-inside: avoid;
    }

    div#footer {
        position: fixed;
        bottom: -0.8cm;
        right: 0px;

        text-transform:uppercase;
        font: 12px 'Calibri';
    }

}

img.resize {
  ;
}

.former_border{border-top: #a6a6a6 1px solid;padding: 2px;margin: 0px;vertical-align: top;}

.dclr {clear:both;float:none;height:1px;margin:0px;padding:0px;overflow:hidden;}

.ft0{font: 14px 'Calibri';line-height: 19px;}
.ft1{font: 14px 'Calibri';line-height: 15px;}
.ft2{font: bold 14px 'Calibri';line-height: 29px;}
.ft3{font: 14px 'Calibri';line-height: 1px;}
.ft4{font: bold 14px 'Calibri';color: #595959;line-height: 19px;}
.ft5{font: 14px 'Calibri';line-height: 6px;}
.ft6{font: 14px 'Calibri';line-height: 19px;}
.ft7{font: 14px 'Calibri';line-height: 22px;}
.ft8{font: 14px 'Calibri';line-height: 17px;}
.ft9{font: bold 14px 'Calibri';line-height: 19px;}
.ft10{font: bold 14px 'Calibri';color: #404040;line-height: 19px;}
.ft11{font: bold 14px 'Calibri';color: #ff0000;line-height: 19px;}
.ft12{font: 14px 'Calibri';line-height: 18px;}
.ft13{font: 14px 'Calibri';line-height: 8px;}
.ft14{font: bold 14px 'Calibri';line-height: 15px;}
.ft15{font: bold 14px 'Calibri';line-height: 14px;}
.ft16{font: 14px 'Calibri';line-height: 9px;}
.ft17{font: 14px 'Calibri';line-height: 14px;}
.ft18{font: bold 14px 'Calibri';color: #808080;line-height: 14px;}
.ft19{font: 14px 'Calibri';line-height: 13px;}

.p0{text-align: left;padding-left: 2px;margin-top: 0px;margin-bottom: 0px;}
.p1{text-align: left;padding-left: 4px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p2{text-align: left;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p3{text-align: left;padding-left: 129px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p4{text-align: left;padding-left: 3px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p5{text-align: left;padding-left: 3px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p6{text-align: right;padding-right: 3px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p7{text-align: right;padding-right: 238px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p8{text-align: right;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p9{text-align: left;padding-left: 150px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p10{text-align: left;padding-left: 75px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p11{text-align: center;padding-right: 21px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p12{text-align: center;padding-right: 14px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p13{text-align: center;padding-right: 10px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p14{text-align: center;padding-right: 6px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p15{text-align: center;padding-right: 15px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p16{text-align: left;padding-left: 14px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p17{text-align: center;padding-right: 18px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p18{text-align: center;padding-right: 9px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}

.td0{padding: 0px;margin: 0px;vertical-align: bottom;}
.td1{padding: 0px;margin: 0px;vertical-align: bottom;}
.td2{padding: 0px;margin: 0px;vertical-align: bottom;}
.td3{border-bottom: #000000 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td4{border-bottom: #000000 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td5{border-bottom: #a6a6a6 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td6{border-bottom: #a6a6a6 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td7{padding: 0px;margin: 0px;vertical-align: bottom;}
.td8{padding: 0px;margin: 0px;vertical-align: bottom;}
.td9{padding: 0px;margin: 0px;vertical-align: bottom;}
.td10{padding: 0px;margin: 0px;vertical-align: bottom;}
.td11{padding: 0px;margin: 0px;vertical-align: bottom;}
.td12{padding: 0px;margin: 0px;vertical-align: bottom;}
.td13{padding: 0px;margin: 0px;vertical-align: bottom;}
.td14{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td15{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td16{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td17{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td18{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td19{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td20{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td21{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td22{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td23{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td24{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td25{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td26{padding: 0px;margin: 0px;vertical-align: bottom;}
.td27{padding: 0px;margin: 0px;vertical-align: bottom;}

.tr0{height: 30px;}
.tr1{height: 36px;}
.tr2{height: 6px;}
.tr3{height: 19px;}
.tr4{height: 25px;}
.tr5{height: 23px;}
.tr6{height: 17px;}
.tr7{height: 21px;}
.tr8{height: 39px;}
.tr9{height: 34px;}
.tr10{height: 20px;}
.tr11{height: 18px;}
.tr12{height: 8px;}
.tr13{height: 31px;}
.tr14{height: 16px;}
.tr15{height: 9px;}
.tr16{height: 14px;}

.t0{margin-top: 13px;font: 16px 'Calibri';border-spacing: 0;background-color: white;}
.t1{margin-top: 15px;font: 12px 'Calibri';}
.t2{font: 11px 'Calibri';}

    

    
<div class='description'>
        <div class="municipality">{{ municipality }}</div>
</div>
<div class="summary">
        <div class="content summary__info">
            <TABLE border="0" class="table0 info__table">
                <TR>
                    <TD><P class="td3 p9 ft9">Resumo semana de {{ start_date }} até {{ end_date }}</P></TD>
                    <TD><P class="td3 p9 ft9">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD><P class="td5 p5 ft0">Prof. Participantes</P></TD>
                    <TD><P class="td6 p6 ft0">{{ professores_participantes }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="td5 p5 ft0">Prof. Avaliaram</P></TD>
                    <TD><P class="td6 p6 ft0">{{ professores_q_avaliaram }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="td5 p5 ft0">Avaliações Realizadas</P></TD>
                    <TD><P class="td6 p6 ft0">{{ avaliacoes_realizadas }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="td3 p5 ft11">Prof. que não avaliaram</P></TD>
                    <TD><P class="td4 p6 ft11">{{ professores_q_nao_avaliaram }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="tr8 td0 p2 ft13">&nbsp;</P></TD>
                    <TD><P class="tr8 td1 p2 ft13">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD><P class="td3 p9 ft9">Uso Semanal</P></TD>
                    <TD><P class="td3 p9 ft9">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD><P class="td5 p5 ft0">Prof. dentro do esperado</P></TD>
                    <TD><P class="td6 p6 ft0">{{ prof_ok }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="td3 p5 ft11">Prof. fora do esperado</P></TD>
                    <TD><P class="td4 p6 ft11">{{ prof_n_ok }}</P></TD>
                </TR>
            </TABLE>  
        </div>

        <div class="content presentation">
            <div class="content presentation week">
                {{ pie_week_chart }}
            </div>
            <div class="content presentation project">
                {{ pie_project_chart }}
            </div>
        </div>
</div>


Artigo em português sobre a metodologia de escrever css BEM que vai te ajudar: https://tableless.com.br/bem-um-novo-metodo-para-seu-css/

Artigo interessante em inglês: https://www.toptal.com/css/introduction-to-bem-methodology

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .