Organizando estilos e scripts sem perder a sanidade

A apresentação aborda o impacto positivo ou negativo que o carregamento e a organização podem causar em nossas aplicações; abordará exemplos como a forma inteligente de carregamento com a função 'enqueue_script', modularização de código com a 'get_template_part'. Sugestões de organização do núcleo assets e como podemos categorizar e modularizar nossos estilos com foco na reutilização de classes, uso de pré processadores e task runners.

Transcript

1. Organizando scripts e styles sem perder a sanidade
2. Anderson Nascimento @theandersonn
3. Por que?
4. ❏ Diminuir a quantidade de requests; ❏ Facilitar o entendimento do código; ❏ Facilitar a reutilização de trechos em comum; ❏ Facilitar a manutenção; ❏ Melhorar o fluxo do trabalho em equipe. Por que?
5. Enxugando o carregamento de scripts do plugin Contact Form 7
6. Carregamento inteligente com a função enqueue <?php add_action('wp_enqueue_scripts', 'your_enqueue_scripts'); function your_enqueue_scripts() { // LOADING STYLES CSS wp_enqueue_style('all-css', get_stylesheet_directory_uri() . '/assets/src/css/all.css'); // LOADING SCRIPTS JS wp_enqueue_script('scripts-js', get_stylesheet_directory_uri() . '/assets/src/js/all.js', array(), null, true); }
7. Reutilizando trechos de código // the default loop <?php get_template_part( 'template-parts/component', 'loop' ); ?> // slider products <?php get_template_part( 'template-parts/slider/products' ); ?> // pagination html <?php get_template_part( 'template-parts/component', 'pagination-html' ); ?> // header menu html <?php get_template_part( 'template-parts/component', 'menu-html' ); ?>
8. CSS Orientado a objetos (OOCSS) Simplificando… O objetivo desta metodologia é evitar a repetição de código Soluções propostas: ❏ Modular; ❏ Poucas requisições HTTP; ❏ Manutenível, semântico e padronizado.
9. CSS Orientado a objetos (OOCSS) Os 2 princípios mais importantes são: ❏ Separar estrutura e skin; ❏ Separar contêiner e conteúdo.
10. OOCSS, SMACSS, BEM, DRY CSS, SUIT CSS, ATOMIC DESIGN, RSCSS Metodologias
11. Escolher um pré processador -> ou não :( |o| \o/ SASS, LESS, STYLUS Pré processadores CSS
12. O que esses caras podem fazer por mim? ❏ Utilizar variáveis; ❏ Utilizar mixins; ❏ Usar funções; ❏ Aninhamento de regras; ❏ Operações aritméticas; ❏ Estender classes com heranças. CSS com super poderes!
14. Task runner [?][!] São ferramentas que se destinam a automatizar tarefas rotineiras que devem acontecer em determinados momento do desenvolvimento. ❏ Compilação do SASS para CSS; ❏ Concatenação e minificação de CSS e JS; ❏ Minificação de imagens; ❏ Etc... 2 tasks runners amplamente utilizados ❏ Grunt ❏ Gulp
15. Categorização e organização do assets js sass images
16. “Never let the fear of striking out keep you from playing the game” Babe Ruth
17. Obrigado! @theandersonn