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

[4589]

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!

[pzin]

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.

[4589]

Eso, a las clases me refiero...

Qué criterio seguís...? Es que... en eso me pierdo... y me hago buenos líos...

[pzin]

Iniciado por 4589

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).

[4589]

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"...

[pzin]

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:

.producto_destacado_descripcion {}
 

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

Código CSS:

#producto_destacado .descripcion {}
 

Puedes tener otra clase llamada así en otro lugar:

Código css:

.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:

#producto_destacado
  border: 2px solid red
 
    .descripcion
      padding: 10px
      background: $color_principal
      color: darken($color_principal,30)
 
.producto_nuevo
  float: left
  width: 50%
 
    .descripcion
      padding: 5px
      font-size: .8rem
 

[4589]

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?

[Rafael]

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:

div.producto p {}
 
div.nuevo p {}
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:

<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:

.producto p {}
 
.nuevo p {}
.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:

.fder {float: right;}
.fizq {float: left;}
 

para dar un formato rápido a una imagen, o cosas así.

[webosiris]

Iniciado por 4589

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!

[4589]

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

[juangemelo01]

Iniciado por 4589

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

[4589]

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!

[joaquincreatividad]

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

[pzin]

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.

[4589]

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!

[JustinKO]

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

[4589]

JustinKO gracias!!! le echaré un vistazo!