Your Ad Here

advanced code snippet search

Posted By

demixo on 03/23/09


Tagged

css


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

jitendraweb
m4tik


Construyendo un css mantenible

 / Published in: CSS
 
POSH => HTML semántico

http://aprendiendoweb.com/2008/08/posh-html-semantico

  1. Debe ser HTML válido
  2. No se deben usar elementos de presentación como <b> o <i>
  3. Todos los estilos deben darse usando CSS
  4. Todos los links deben apuntar a algún lado (nada de dejar el href="" vacío)
  5. Los atributos class e id deben describir el tipo de información que lleva el elemento y no cómo debería verse

Ordenar estilos por especificidad

  • Elementos, agrupados por el tipo de etiquetas
  • Clases, agrupados por el efecto que crean
  • IDs, agrupados por el componente que afectan

Agrupando

Estilos generales

  • Estilos del body
  • Reset
  • Enlaces
  • Encabezados
  • Listas
  • Otros estilos

Helper styles

  • Formularios
  • Notificaciones y errores

Estructura de página

Páginas componentes

Overrides

Trucos IE6

Texto fantasma: http://www.toastedweb.si/docs/ieghosttextbugfix.html

Expand | Embed | Plain Text 
  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  

You need to login to post a comment.