Vamos analisar um pouco sobre como devemos pensar em front-end, identificando pontos de planejamento e de atenção e o que podemos melhorar no front do wordpress para atingirmos a modularização.

1. como pensar front para wordpress

2. bernard de luna
@bernarddeluna

3. - 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

4. @bernarddeluna

5. @bernarddeluna
qual o ponto fraco
do seu código?

6. @suco_de_uva
meu ponto fraco é o cansaço. chega um
momento que não consigo mais pensar e vou
metendo classe :/
@netofontenelle
organização não sei como separar bem o meu
CSS. :/
@zenorocha
refatoração. uma vez pronto, quase nunca volto
para otimizar o CSS
@srmarcosalberto
ainda rola uma certa dificuldade de nomear bem
os elementos

7. @rafasato
organização de css e falta de criatividade para
nomear elementos
@fabriciofmsilva
dúvidas para nomear elementos, falta de
organização e refatoração
@wl_lf
refatoração e nomear elementos.
@cironunesdev
meu ponto fraco é nomear as classes. Sem um
plano, é dificil manter a disciplina de ter
"carinho" ao escolher os nomes.

8. @juliobitencourt
a minha é o tal do DRY :(
@fernahh
dar nome aos bois, digo, as variáveis D:
@matos_eduardo
organização.
@glaucoweb
eu acho que eh falta de compromisso até o
final. Ahh depois eu refatoro td. Começa mt
bem mas nao termina :(

9. 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

10. bernard de luna
@bernarddeluna

11. bernard de luna
@bernarddeluna

12. defina os componentes
do seu framework

13. dribbble.com

14. dedique-se às
convenções de nome

15. imagine uma empresa

16. imagine uma empresa
função-nome

17. imagine uma empresa
nav
nav-item
nav-link

18. imagine uma empresa
btn
btn-primary
btn-large, btn-small

19. imagine uma empresa
gallery
gallery-item
gallery-link
gallery-thumb

20. imagine uma empresa
gallery
gallery-item
gallery-link
gallery-thumb
camelCase não é
recomendado para CSS
http://csswizardry.com/2010/12/css-camel-case-seriously-sucks/

21. agrupe e teste todos os
seus componentes

22. dribbble.com

23. dribbble.com

24. incluindo wordpress no
processo de front-end

28. falta de um wrapper

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

30. <span class="sep">Posted on </span>
<span class="sep"> by </span>

31. <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>

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

37. contribuímos uma gota
para melhorar isso

39. fui!obrigado!
@bernarddeluna