Foros del Web » Creando para Internet » CSS »

¿Cómo nombráis las etiquetas de vuestro CSS?

Estas en el tema de ¿Cómo nombráis las etiquetas de vuestro CSS? en el foro de CSS en Foros del Web. Hola a todos!!!! Una duda para que me ayudéis y así poder seguir aprendiendo gracias a vuestra ayuda. Tengo el HTML de mi web todo ...
  #1 (permalink)  
Antiguo 30/09/2014, 08:11
4589
Invitado
 
Mensajes: n/a
Puntos:
¿Cómo nombráis las etiquetas de vuestro CSS?

Hola a todos!!!!

Una duda para que me ayudéis y así poder seguir aprendiendo gracias a vuestra ayuda.

Tengo el HTML de mi web todo hecho y el CSS también y todo se ve como yo quiero. EL problema viene en que el CSS lo he intentado por todos los medios mantener colocado para no perderme a la hora de hacer cambios y... dicho orden me cuesta por una cosa bastante simple...

¿Qué criterio seguís para nombrar las etiquetas de CSS?

<p class="text"></p>

Es que no sé ni que poner y por eso me estoy armando un lío padre.

Gracias!
  #2 (permalink)  
Antiguo 30/09/2014, 08:24
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: ¿Cómo nombráis las etiquetas de vuestro CSS?

Más que etiquetas supongo que te refieres a las clases.

En un párrafo siempre habrá texto, ¿no? Nombrarlo así no tiene mucho sentido. Si es la descripción de un producto, llámalo descripción.
__________________
(:
  #3 (permalink)  
Antiguo 30/09/2014, 08:54
4589
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: ¿Cómo nombráis las etiquetas de vuestro CSS?

Eso, a las clases me refiero...

Qué criterio seguís...? Es que... en eso me pierdo... y me hago buenos líos...
  #4 (permalink)  
Antiguo 30/09/2014, 09:52
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: ¿Cómo nombráis las etiquetas de vuestro CSS?

Cita:
Iniciado por 4589 Ver Mensaje
Eso, a las clases me refiero...

Qué criterio seguís...? Es que... en eso me pierdo... y me hago buenos líos...
Básicamente, llamar a las cosas por su nombre. Mucha gente comete el error conceptual de llamar a las cosas por su estilo o ubicación (rojo, verde, izquierda, derecha) en lugar de hacer por qué son esas cosas (título, descripción, etc).
__________________
(:
  #5 (permalink)  
Antiguo 01/10/2014, 01:46
4589
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: ¿Cómo nombráis las etiquetas de vuestro CSS?

Vale, ese es uno de los errores que he cometido... he empezado a llamar a las cosas por su color tamaño, ubicación etc...

Entonces... a las clases hay que ponerles un nombre para que ocurra lo que ocurra en la clase se siga entendiendo, no?

Pero... como de grande tiene/debe de ser el nombre de la clase? Esque poner una palabra para definir a una clase me parece bastante complicado... por eso he acabado llamando a las clases por "verde", "rojo", " arriba", "derecha"...
  #6 (permalink)  
Antiguo 01/10/2014, 08:10
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: ¿Cómo nombráis las etiquetas de vuestro CSS?

Es que nadie ha dicho que tenga porqué ser una palabra. Igual que cuando programas en Ruby, Python, C++ o o que sea, se supone que tus variables, clases, funciones y demás sean descriptivas en función de lo que son o lo que hacen. Pues con las clases e identificadores en CSS (o realmente HTML) es lo mismo:

Código CSS:
Ver original
  1. .producto_destacado_descripcion {}

Pero tal vez no tenga porqué ser así, si no:

Código CSS:
Ver original
  1. #producto_destacado .descripcion {}

Puedes tener otra clase llamada así en otro lugar:

Código css:
Ver original
  1. .producto_nuevo .descripcion {}

Y obviamente ambos tener estilos diferentes.

Los preprocesadores (SASS uso yo) ayudan mucho a tener un código extremadamente ordenado, incluso en diferentes archivos que luego se compilan en uno solo (o no), porque el orden que van a tener será bastante similar al código HTML.

Por ejemplo en SASS:

Código CSS:
Ver original
  1. #producto_destacado
  2.   border: 2px solid red
  3.  
  4.     .descripcion
  5.       padding: 10px
  6.       background: $color_principal
  7.       color: darken($color_principal,30)
  8.  
  9. .producto_nuevo
  10.   float: left
  11.   width: 50%
  12.  
  13.     .descripcion
  14.       padding: 5px
  15.       font-size: .8rem
__________________
(:
  #7 (permalink)  
Antiguo 03/10/2014, 02:04
4589
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: ¿Cómo nombráis las etiquetas de vuestro CSS?

Hola pzin. He estado mirando cosas de los preprocesadores SASS y me han parecido algo complicados para el nivel que tengo.

¿Merecen la pena meterse en eso de los preprocesadores SASS con el nivel básico que tengo y para una web que no es ni muy grande ni complicada?

¿Hay alguna ventaja además de el orden extremo? Supongo que sí..., ¿no?
  #8 (permalink)  
Antiguo 03/10/2014, 03:52
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 8 meses
Puntos: 1826
Respuesta: ¿Cómo nombráis las etiquetas de vuestro CSS?

Soy diseñador... Soy minimalista... Soy sangrón...

Yo incluso reduciría o clasificaría más la cosa. OBVIAMENTE depende del proyecto real, pero retomando el ejemplo de Pzin.

Un párrafo aislado es muy difícil que yo le ponga estilo. Yo supondría que está en un contexto por lo que tal vez el contenedor es el que debería ir clasificado.

Código CSS:
Ver original
  1. div.producto p {}
  2.  
  3. div.nuevo p {}
  4. div.destacado p {}

así dentro de tu archivo no tendrás que mover cada párrafo, sino quizá cambiar alguna etiqueta del div

Código HTML:
Ver original
  1. <div class="producto destacado"></div>

En un proyecto que incluso generes con una base de datos, podrías remover o cambiar en algún momento la variable "destacado" y automáticamente la clasificación cambia a "producto" a secas.

Algo más genérico aún es dejarlo:

Código CSS:
Ver original
  1. .producto p {}
  2.  
  3. .nuevo p {}
  4. .destacado p {}

Así podrás usarlo indistintamente en un article, o en un div, según necesites.


Tengo sí por ahí algún css básico de emergencia:
Código CSS:
Ver original
  1. .fder {float: right;}
  2. .fizq {float: left;}
para dar un formato rápido a una imagen, o cosas así.

Última edición por Rafael; 03/10/2014 a las 03:57
  #9 (permalink)  
Antiguo 03/10/2014, 10:12
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 9 meses
Puntos: 998
Respuesta: ¿Cómo nombráis las etiquetas de vuestro CSS?

Cita:
Iniciado por 4589 Ver Mensaje
Hola pzin. He estado mirando cosas de los preprocesadores SASS y me han parecido algo complicados para el nivel que tengo.
quizás lo mejor sería ir paso a paso y que te sientas algo más cómodo con CSS antes de irte a SASS... pero creeme, apenas tengas oportunidad de usar SASS no vas a querer volver al CSS "normal" nunca más!
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -

Última edición por webosiris; 03/10/2014 a las 10:23
  #10 (permalink)  
Antiguo 06/10/2014, 03:21
4589
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: ¿Cómo nombráis las etiquetas de vuestro CSS?

Sí, poco a poco mejor. Y.. me podríais decir alguna web para comprimir mi CSS. Ahora mismo lo tengo subido tal cual, sin comprimir. Eso afecta a la velocidad de la web, el no tenerlo comprimido.

Gracias
  #11 (permalink)  
Antiguo 10/10/2014, 02:04
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 13 años, 8 meses
Puntos: 17
Respuesta: ¿Cómo nombráis las etiquetas de vuestro CSS?

Cita:
Iniciado por 4589 Ver Mensaje
Sí, poco a poco mejor. Y.. me podríais decir alguna web para comprimir mi CSS. Ahora mismo lo tengo subido tal cual, sin comprimir. Eso afecta a la velocidad de la web, el no tenerlo comprimido.

Gracias
si, afecta, ¿cuanto pesa tu codigo css? ¿tienes comprimidas tus imagenes? creo que antes de comprimir las hojas css, es mejor comprimir las imágenes procurando no perder tanta calidad, creeme, tu web se agilizara mas si comprimes primero las imágenes antes que la hoja css
aun asi, si deseas comprimir tus hojas de estilo, podrias probar esta herramienta
http://csscompressor.com/

espero que te sirva amigo
  #12 (permalink)  
Antiguo 13/10/2014, 07:07
4589
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: ¿Cómo nombráis las etiquetas de vuestro CSS?

juangemelo01 mi código CSS pesa:

10 KB (9.762 bytes)

No sé si es mucho o es poco... yo creo que poco, no?

Gracias!
  #13 (permalink)  
Antiguo 13/10/2014, 12:46
 
Fecha de Ingreso: octubre-2014
Ubicación: Cancun
Mensajes: 80
Antigüedad: 10 años, 1 mes
Puntos: 4
Respuesta: ¿Cómo nombráis las etiquetas de vuestro CSS?

yo me baso en jerarquia de secciones por ejemplo
/*home*/
todas las etiquetas del home ejemplo

.home p{}
.home ul{}
.home label
.home .sidebar {}

etc asi no axiste pierde
__________________
Inmobiliairia en cancun
  #14 (permalink)  
Antiguo 13/10/2014, 13:55
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: ¿Cómo nombráis las etiquetas de vuestro CSS?

Si es por orden, SASS y en toda la boca.

Es abstracción total. Y luego todo esto se compila en dos archivos (creo que eran dos). Puede llegar cualquier persona o tú mismo después pasados meses y saber donde encontrar cada cosa.

__________________
(:
  #15 (permalink)  
Antiguo 14/10/2014, 02:35
4589
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: ¿Cómo nombráis las etiquetas de vuestro CSS?

pzin, perdona pero no entiendo tu último post.

Yo he ordenado mi CSS de la siguiente manera

h1_work {}
h1_about {}
h1_contact {}

h2_work {}
h2_about {}
h2_contact {}

Y así con todas las etiquetas... estaría bien y sería correcto?

Gracias a todos!
  #16 (permalink)  
Antiguo 14/10/2014, 05:50
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid
Mensajes: 339
Antigüedad: 12 años, 5 meses
Puntos: 47
Respuesta: ¿Cómo nombráis las etiquetas de vuestro CSS?

Hola,
Yo te recomendaría que leyeras esto. A mí me ha cambiado la forma de trabajar radicalmente y por supuesto a mejor.
Creo que se le saca más partido cuando tienes cierta experiencia con el tema, pero si no ahora quizá más adelante te podrá ser útil.
Saludos

https://github.com/Wakkos/CSS-Guidelines
  #17 (permalink)  
Antiguo 14/10/2014, 07:04
4589
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: ¿Cómo nombráis las etiquetas de vuestro CSS?

JustinKO gracias!!! le echaré un vistazo!

Etiquetas: etiquetas, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:15.