como pensar front para wordpress

como pensar front para wordpress

bernard de luna@bernarddeluna

- team leader de produto na Petrobras- creative director da Melt DSP- criador do framework Formee- colunista do iMasters e Tableless - +50 eventos pelo Brasil- HTML5DevConf em San Francisco

@bernarddeluna

@bernarddeluna

qual o ponto fraco do seu código?

@suco_de_uvameu ponto fraco é o cansaço. chega um momento que não consigo mais pensar e vou metendo classe :/

@netofontenelleorganização não sei como separar bem o meu CSS. :/

@zenorocharefatoração. uma vez pronto, quase nunca volto para otimizar o CSS

@srmarcosalbertoainda rola uma certa dificuldade de nomear bem os elementos

@rafasatoorganização de css e falta de criatividade para nomear elementos

@fabriciofmsilvadúvidas para nomear elementos, falta de organização e refatoração

@wl_lfrefatoração e nomear elementos.

@cironunesdevmeu ponto fraco é nomear as classes. Sem um plano, é dificil manter a disciplina de ter "carinho" ao escolher os nomes.

@juliobitencourta minha é o tal do DRY :(

@fernahhdar nome aos bois, digo, as variáveis D:

@matos_eduardoorganização.

@glaucowebeu acho que eh falta de compromisso até o final. Ahh depois eu refatoro td. Começa mt bem mas nao termina :(

bonito

novos estilos são adicionados

bagunçado

estilos existentes não são reutilizados

estilos não utilizados não são removidos

não consertar o que não estiver quebrando o layout

css

tempo

https://speakerdeck.com/winston/wah-lau-css-can-be-tested-too

bernard de luna@bernarddeluna

bernard de luna@bernarddeluna

defina os componentes do seu framework

dribbble.com

dedique-se às convenções de nome

imagine uma empresa

imagine uma empresa

função-nome

imagine uma empresa

navnav-itemnav-link

imagine uma empresa

btnbtn-primarybtn-large, btn-small

imagine uma empresa

gallerygallery-item gallery-linkgallery-thumb

imagine uma empresa

gallerygallery-item gallery-linkgallery-thumb

camelCase não é recomendado para CSShttp://csswizardry.com/2010/12/css-camel-case-seriously-sucks/

agrupe e teste todos os seus componentes

dribbble.com

dribbble.com

incluindo wordpress no processo de front-end

falta de um wrapper

<header id="branding" role="banner"></div>

<span class="sep">Posted on </span>

<span class="sep"> by </span>

<span class="sep">Posted on </span>

<span class="sep"> by </span>

<footer class="entry-meta">

This entry was posted in <a href="http://localhost:8888/wordpress/?cat=1"

title="View all posts in Uncategorized" rel="category">Uncategorized</a> and

tagged <a href="#" rel="tag">cursus</a> by <a href="#">admin</a>. Bookmark

the <a href="#" title="Permalink to Mais um tipo de post"

rel="bookmark">permalink</a>. </footer>

<div id="secondary" class="widget-area" role="complementary"> <aside id="search-2" class="widget widget_search"></aside>

</div>

contribuímos uma gota para melhorar isso

fui!obrigado!

@bernarddeluna