¿Cómo sangrar correctamente el código mixto PHP/HTML?

Question

Al mezclar PHP y HTML, ¿cuál es el estilo de sangría adecuado para usar? ¿Doy sangría para que el HTML resultante tenga la sangría correcta, o para que la mezcla PHP/HTML se vea correctamente formateada (y, por lo tanto, sea más fácil de leer)?

Por ejemplo, supongo que tengo un foreach bucle de salida de filas de tablas. ¿Cuál de abajo es correcto?

PHP mezcla/HTML es correcta:

<table> 
    <?php foreach ($rows as $row): ?> 
    <tr> 
     <?php if ($row->foo()): ?> 
     <?php echo $row ?> 
     <?php else: ?> 
     Something else 
     <?php endif ?> 
    </tr> 
    <?php endforeach ?> 
</table> 

da salida HTML es correcta:

<table> 
<?php foreach ($rows as $row): ?> 
    <tr> 
    <?php if ($row->foo()): ?> 
    <?php echo $row ?> 
    <?php else: ?> 
    Something else 
    <?php endif ?> 
    </tr> 
<?php endforeach ?> 
</table> 

que he encontrado que cuando me encuentro con esta situación (con bastante frecuencia), No tengo un estilo estándar para usar. Sé que puede no haber una respuesta "correcta", pero me encantaría escuchar las opiniones de otros desarrolladores.

Answer 1

El PHP y HTML deben cada uno tener una sangría de manera que sean correcta con respecto a sí mismos en forma de código fuente, independientemente el uno del otro y de la forma como salida:

<table> 
<?php foreach ($rows as $row): ?> 
    <tr> 
    <?php if ($row->foo()): ?> 
     <?php echo $row ?> 
    <?php else: ?> 
     Something else 
    <?php endif ?> 
    </tr> 
<?php endforeach ?> 
</table> 

Answer 2

lo general puse apertura etiquetas php al comienzo de la línea, pero sangra lo que esté dentro de las etiquetas para que coincida con el formato html. No hago esto, sin embargo, para declaraciones de eco simples ya que uso etiquetas abre-cortas. Creo que lo hace más simple cuando navega por el archivo para encontrar todas las declaraciones.

<table> 
<? foreach ($foo as $bar): ?> 
     <tr> 
<? foreach ($bar as $baz): ?> 

     <td><?=$baz?></td> 

<? endforeach ?> 
     </tr> 
<? endforeach ?> 
    </table> 

Answer 3

1. respuesta directa a su pregunta: Si es necesario leer la salida HTML a menudo, puede ser una buena cosa para la producción así HTML sangría. Pero el caso más común será que necesita leer su código fuente php, por lo que es más importante que la fuente sea fácil de leer.
2. Alternativa a las dos opciones que mencionó: Consulte chaos' o tj111's respuesta.
3. Mejor aún en mi opinión: no mezcle HTML y php; use una plantilla de motor en su lugar.

Answer 4

Siempre puede usar un poco de espacio en blanco para ayudar a la lectura. Basándose en el caos muesca:

<table> 

<?php foreach ($rows as $row): ?> 

    <tr> 

    <?php if ($row->foo()): ?> 
     <?php echo $row ?> 
    <?php else: ?> 

     Something else 

    <?php endif ?> 

    </tr> 

    <?php endforeach ?> 

</table 

El único inconveniente con esto es si usted tiene una gran cantidad de código mixto puede hacer que su documento el doble de tiempo, lo que hace que para mayor desplazamiento. Aunque si tiene este código tan variado, es posible que desee considerar un motor de plantillas.

Answer 5

A menudo también reflexioné sobre esta pregunta, pero luego me di cuenta, ¿a quién le importa cómo se ve la salida de HTML? Sus usuarios no deberían mirar su HTML de todos modos. Es para USTED para leer, y tal vez un par de otros desarrolladores. Mantenga el código fuente tan limpio como sea posible y olvídese de cómo se ve la salida.

Si necesita depurar la salida, use Herramientas de desarrollo de Chrome, Firebug o incluso herramientas de F12.

Answer 6

No debería preocuparse por la indentación de marcado en el entorno de producción. Tampoco deberías usar Tidy u otros purificadores de HTML. Hay casos de uso válidos, p. cuando permite la entrada de HTML (pero considere usar Markdown en su lugar), aunque estos son raros.

La mayoría de los embellecedores HTML-filtros se utilizan para ocultar los problemas subyacentes con el código. No lo hagas Corrija su marcado manualmente.

Si necesita aplicar sangría a su código solo en el entorno de desarrollo, puede usar cualquiera de los anteriores. Sin embargo, tenga en cuenta que estas bibliotecas intentarán corregir su marcado (ese es su objetivo principal, la sangría es un subproducto). Escribí la herramienta de sangría basada en expresiones regulares Dindent.

Dindent convertirá marcado así:

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 
    <script> 
    console.log('te> <st'); 
    function() { 
     test; <!-- <a> --> 
    } 
    </script> 
    <div> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <div><table border="1" style="background-color: red;"><tr><td>A cell test!</td> 
<td colspan="2" rowspan="2"><table border="1" style="background-color: green;"><tr> <td>Cell</td><td colspan="2" rowspan="2"></td></tr><tr> 
     <td><input><input><input></td></tr><tr><td>Cell</td><td>Cell</td><td>Ce 
      ll</td></tr></table></td></tr><tr><td>Test <span>Ce  ll</span></td></tr><tr><td>Cell</td><td>Cell</td><td>Cell</td></tr></table></div></div> 
</body> 
</html> 

A esto:

<!DOCTYPE html> 
<html> 
    <head></head> 
    <body> 
     <script> 
    console.log('te> <st'); 
    function() { 
     test; <!-- <a> --> 
    } 
    </script> 
     <div> 
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
      <div> 
       <table border="1" style="background-color: red;"> 
        <tr> 
         <td>A cell test!</td> 
         <td colspan="2" rowspan="2"> 
          <table border="1" style="background-color: green;"> 
           <tr> 
            <td>Cell</td> 
            <td colspan="2" rowspan="2"></td> 
           </tr> 
           <tr> 
            <td> 
             <input> 
             <input> 
             <input> 
            </td> 
           </tr> 
           <tr> 
            <td>Cell</td> 
            <td>Cell</td> 
            <td>Ce ll</td> 
           </tr> 
          </table> 
         </td> 
        </tr> 
        <tr> 
         <td>Test <span>Ce ll</span></td> 
        </tr> 
        <tr> 
         <td>Cell</td> 
         <td>Cell</td> 
         <td>Cell</td> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </body> 
</html> 

Dindent no intentará desinfectar o interferir con su código más allá de la adición de la sangría de otra manera. Esto es para facilitar su desarrollo/depuración. No para producción