Advanced Search

Construyendo un css mantenible

/ Published in: CSS
Save to your folder(s)
POSH => HTML semántico
http://aprendiendoweb.com/2008/08/posh-html-semantico
<ol>
<li>Debe ser HTML válido</li>
<li>No se deben usar elementos de presentación como &lt;b&gt; o &lt;i&gt;</li>
<li>Todos los estilos deben darse usando CSS</li>
<li>Todos los links deben apuntar a algún lado (nada de dejar el href="" vacío)</li>
<li>Los atributos class e id deben describir el tipo de información que lleva el elemento y no cómo debería verse</li>
</ol>

Ordenar estilos por especificidad
<ul>
<li>Elementos, agrupados por el tipo de etiquetas</li>
<li>Clases, agrupados por el efecto que crean</li>
<li>IDs, agrupados por el componente que afectan</li>
</ul>

Agrupando
<strong>Estilos generales</strong>
<ul>
<li>Estilos del body</li>
<li>Reset</li>
<li>Enlaces</li>
<li>Encabezados</li>
<li>Listas</li>
<li>Otros estilos</li>
</ul>

<strong>Helper styles</strong>
<ul>
<li>Formularios</li>
<li>Notificaciones y errores</li>
</ul>

<strong>Estructura de página</strong>

<strong>Páginas componentes</strong>

<strong>Overrides</strong>

Trucos IE6
<strong>Texto fantasma:</strong>
http://www.toastedweb.si/docs/ie_ghost_text_bug_fix.html

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* @group Enlaces */
  2. a {
  3.   outline:none;
  4. }
  5. a:link {}
  6. a:visited {}
  7. a:hover {}
  8. a:active {}
  9.  
  10. /* @end */
  11.  
  12.  
  13. /* @group Encabezados */
  14. h1 {
  15.  
  16. }
  17. h1 a:link,
  18. h1 a:visited,
  19. h1 a:hover,
  20. h1 a:focus,
  21. h1 a:active {
  22.  
  23. }
  24.  
  25. h2 {
  26.  
  27. }
  28. h2 a:link,
  29. h2 a:visited,
  30. h2 a:hover,
  31. h2 a:focus,
  32. h2 a:active {
  33.  
  34. }
  35.  
  36. h3 {
  37.  
  38. }
  39. h3 a:link,
  40. h3 a:visited,
  41. h3 a:hover,
  42. h3 a:focus,
  43. h3 a:active {
  44.  
  45. }
  46. /* @end */
  47.  
  48.  
  49. /* @group Listas */
  50.  
  51. /*default list*/
  52.  
  53. /*action list*/
  54.  
  55. /*toggle list*/
  56.  
  57. /*external link list*/
  58.  
  59. /*product list*/
  60.  
  61. /*feature list*/
  62.  
  63. /* @end */
  64.  
  65.  
  66. /* @group Elementos de pagina */
  67. /*Paginado*/
  68. /*Calendario*/
  69. /*Comentarios*/
  70. /* @end */

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.