Best Practices 10up Engineering

10up Engineering Best Practices

目录:

1. CSS

2. JS

3. MarkUp

4. Tools

5. PHP

6. Structure

7. Migrations

8. Version Control

1. CSS

1. CSS Syntax

   • Write one selector per line

   • Write one declaration per line

   • Closing braces should be on a new line

     .class-1,
     .class-2,
     .class-3 {
         width: 10px;
         height: 20px;
         color: red;
         background-color: blue;
     

2. Declaration ordering:

   1. Positioning

   2. Box model

   3. Typography

   4. Visual

   5. Other

3. Performance

4. 1. Limit the number of requests by concatenating CSS files and encoding sprites and font files to the CSS file.

1. Minify stylesheets

2. Use GZIP compression when possible Automate these tasks with a PHP or/and JavaScript build process.

2. JS

1. Try to Pass an HTMLElement or HTMLCollection to jQuery Instead of a Selection String

   jQuery( document.getElementById( 'menu' ) );

2. Cache DOM Selections

   var $menu = jQuery( '#menu' );
   var $hideButton = jQuery( '.hide-button' );
   $hideButton.on( 'click', function() {
       $menu.hide();
   });

3. Event Delegation

   jQuery( '#menu' ).on( 'click', 'li', function() {
   // Do stuff!
   });

3. MarkUp

1. Semantic HTML

   • Elements like <header>, <nav>, <footer>, or <article> do a much better job of explaining the content that is contained within the element than <span> or <div>

2. Optimize Readability

   <ul>
       <?php foreach( $things as $thing ) : ?>
           <li><?php echo esc_html( $thing ); ?></li>
       <?php endforeach; ?>
   </ul>

5. PHP

Efficient Database Queries

1. When querying the database in WordPress, you should generally use a WP_Query object.

2. Only run the queries that you need.

   1. 'no_found_rows' => true: useful when pagination is not needed.

   2. 'update_post_meta_cache' => false: useful when post meta will not be utilized.

   3. 'update_post_term_cache' => false: useful when taxonomy terms will not be utilized.

   4. 'fields' => 'ids': useful when only the post IDs are needed (less typical).

3. Do not use posts_per_page => -1

4. Do not use $wpdb or get_posts() unless you have good reason.

   • get_posts() actually calls WP_Query, but calling get_posts() directly bypasses a number of filters by default. Not

5. Avoid using post__not_in

<?php
$foo_query = new WP_Query( array(
    'post_type' => 'post',
    'posts_per_page' => 30 + count( $posts_to_exclude )
) );

if ( $foo_query->have_posts() ) :
    while ( $foo_query->have_posts() ) :
        $foo_query->the_post();
        if ( in_array( get_the_ID(), $posts_to_exclude ) ) {
            continue;
        }
        the_title();
    endwhile;
endif;
?>

1. Escape or Validate Output

Reference

1. Best Practices 10up Engineering