Colocación de CSS

[4589]

Hola, me surge una duda, que supongo que cada uno la resolverá a su manera.

¿Cuándo colocáis el CSS utilizáis muchas a anotaciones para saber de que se tratan las clases?

¿Seguís algún criterio para ponerle nombre a las clases de las etiquetas?

Y por otro lado. ¿Cómo colocaríais esta clase dentro del css?

¿Así?

Código HTML:

p 	
	{
	font-family: "courier";
	font-size: 12px;
	font-weight: normal;
	color:#000000;
	text-align: left;
	line-height: 16px;
        letter-spacing: 0.2px;
	}

	.text 
	{
	margin: 0px 0px 15px 0px;
	}

	.copy
	{
	margin: -10px 0px 15px 0px;
	font-size: 10px;
	line-height:14px;
	}

	.fullscreen
	{
	margin: -10px 0px 0px 0px;
	}

O, ¿así?

Código HTML:

	.text 
	{
	margin: 0px 0px 15px 0px;
        font-family: "courier";
	font-size: 12px;
	font-weight: normal;
	color:#000000;
	text-align: left;
	line-height: 16px;
        letter-spacing: 0.2px;
	}

	.copy
	{
	margin: -10px 0px 15px 0px;
        font-family: "courier";
	font-weight: normal;
	color:#000000;
	text-align: left;
        letter-spacing: 0.2px;
	font-size: 10px;
	line-height:14px;
	}

	.fullscreen
	{
	margin: -10px 0px 0px 0px;
        font-family: "courier";
	font-size: 12px;
	font-weight: normal;
	color:#000000;
	text-align: left;
	line-height: 16px;
        letter-spacing: 0.2px;
	}

Muchísimas gracias!

[rodrigo_temuco]

El criterio es totalmente personal en el css de desarrollo, pero es importantísimo que, al subir tu css al servidor de producción lo comprimas, eliminando todos los comentarios, tabulaciones, espacios en blanco de sobra, etc.
Hay herramientas automáticas para ello.

[4589]

Gracias! Y cuales serían estas herramientas? Pq es necesario comprimirlo de no hacerlo va la web más lenta?

[TommyGun]

¡Hola!
Para comprimir yo uso http://csscompressor.com/. Lo que hace comprimirlo es reducirle muchísimo el tamaño pero lo deja muy difícil de trabajar. Esto generalmente se hace cuando terminas de trabajar con el CSS.
De mi lado tengo la costumbre de comprimirlo y llamarlo, por ejemplo, style.min.css (guardando style.css para siguientes modificaciones).

Por otro lado, mi preferencia de trabajo es no usar las etiquetas HTML para dejar en claro las clases. Aunque no siempre hice esto, actualmente lo hago para poder trabajar con varias clases sobre una etiqueta, ya que cada vez que hago un sitio o trabajo con hojas de estilos guardo esas ideas y las voy incorporando a un CSS general donde ya voy teniendo todo casi listo. Y sí, trabajo con muchos comentarios por costumbre en la programación de videojuegos, también lo hago en PHP.

[juangemelo01]

Yo en lo particular ordeno el css por etiquetas, ID y clases (en ese orden) y por orden alfabetico, inclusive, tambien pongo en orden alfabetico todas las propiedades que tiene cada uno de estos, facilita mas la lectura, y es mas practico a la hora de buscar algo en la hoja de estilo

ahora bien, yo procuro darle estilo de tipografia a las etiquetas donde va solo el puro texto
(p, li, h1, h2, h3, etc. ), tambien hago uso de los selectores padres eh hijos.

por ultimo, si tengo clases que coinciden en 3 - 4 o mas propiedades, las defino una vez separado por una "," y defino las propiedades particulares que tienen cada una de ellas, ejemplo

Código:

.Circulo{
background-color:blue;
border-color:goldenrod;
border-radius:100%;
}

.Cuadrado{
background-color:green;
border-color:red;
}

.Triangulo{
background: linear-gradient(45deg, darkred 33%, transparent 0);
background-repeat:no-repeat;
background-size:200px 200px;
border-color:pink;
}

.Circulo, .Cuadrado, .Triangulo{
border:1px solid;
float:left;
height:200px;
margin:5px 10px;
padding:3px 6px;
width:200px;
}

espero que te ayude amigo

[Triby2]

estoy con juangemelo01, además yo separo el border-radius en otra clase si varios elementos van a tener el mismo radio de borde, así después lo añado a los elementos en cuestión.

Para ejemplificar mejor: (modificando parte del css de juangemelo01)

Código CSS:

#Circulo{
background-color:blue;
border-color:goldenrod;
border-radius:100%;
}
 
#Cuadrado{
background-color:green;
border-color:red;
}
 
#Triangulo{
background: linear-gradient(45deg, darkred 33%, transparent 0);
background-repeat:no-repeat;
background-size:200px 200px;
border-color:pink;
}
 
.dibujar{
border:1px solid;
float:left;
height:200px;
margin:5px 10px;
padding:3px 6px;
width:200px;
}
 

Código HTML:

<div id="Triangulo" class="dibujar"></div>
<div id="Cuadrado" class="dibujar"></div>
<div id="Circulo" class="dibujar"></div>
 

De hecho, si consultas por ahí, la manera en que yo lo he puesto es la más correcta, un único Id por elemento, y las clases que se pueden adjudicar a cualquier elemento. Aunque, tal como juangemelo01 lo ha puesto también funciona... Solo hablo a nivel profesional ya! Pero ambas funcionan!

[pzin]

Yo nunca entendí la ventaja de ordenar el CSS alfabéticamente. Yo lo ordeno por orden de importancia, con pequeñas agrupaciones lógicas. ¿Qué sentido tiene tener la altura en las primeras lineas y el ancho al final?

Cuando alguien pregunta por ordenar el código, tampoco entiendo en qué cabeza cabe poner las clases con mayúsculas.

Yo, como digo, ordeno los atributos por importancia y agrupación lógica. Así los atributos más importantes están siempre en este orden en las primeras lineas:

• position
• top
• right
• bottom
• left
• transform (sobre todo va aquí por si uso translate()
• display (obviamente aquí pudiera ir float ya que float cambia el display del elemento)
• width
• height
• margin
• padding

El resto de posiciones dan un poco más igual. Ya sea porque son más raras de usar o menos importantes.

Lo demás, como digo, es menos interesante, el color que tenga, el fondo, el borde o cómo se gestiona el espacio en blanco…

Para el tema del minimizado no uso nada, ya que como uso un pre-procesador (SASS) viene casi implícito. Que por cierto, el código de arriba según yo quedaría así (en SASS):

Código CSS:

#circulo
  background-color: blue
  border-color: goldenrod
  border-radius: 50%
 
#cuadrado
  background-color: green
  border-color: red
 
#triangulo
  background: linear-gradient(45deg, darkred 33%, transparent 0)
    repeat: no-repeat
    size: 200px 200px
  border-color: pink
 
.circulo, .cuadrado, .triangulo
  float: left
  width: 200px
  height: 200px
  margin: 5px 10px
  padding: 3px 6px
  border: 1px solid
 

Que una vez compilado se minifica y además cambia los nombres de los colores por… colores. Y finalmente con un post-procesador (autoprefixer) se le añaden los prefijos propietarios que se hayan indicado para soportar tal o cual navegador del año de la reconquista.

[Triby2]

bueno en ese último código que me has copiado, el último estilo son clases, no identificadores pero bueno supongo que ha sido un error de escritura.

El sass te lo pondrá como quiera, aunque si vas a ser el único que vas a tocar esa hoja de estilos, mejor que esté como a ti te gusta de la manera más sencilla y clara posible para no liarse mucho y como yo te lo puse, es "más" correcto, ambas maneras están bien, pero es más sencillo asignar una clase dibuja (en caso del ejemplo mío) que asignar todos los elementos que comparten el mismo estilo, de esa forma puedes ir modificando la web qué quieres y qué no quieres que se le asigne la clase "dibujar" sin tocar el css....

Eso tiene su lógica ya que la mejor manera de crear un proyecto es desarrollandolo por secciones y que la modificación de una sección NO CONLLEVE la modificación de las otras secciones.

Por poner un ejemplo una web en php:

- Tiene scripts en php, una estructura html, un código css y un código javascript. Cada uno en un archivo distino, así que mientras creas el php, el css y el javascript independientemente del html, puedes modificar la estructura del html sin que tengas que modificar los demás códigos para que se adapte tu proyecto.

No sé si me explico.

El tema de ordenadas las propiedades simplemente es por la simplicidad de encontrar lo que buscas, así sabes que el height siempre estará en las primeras lineas y el with en las últimas y todo el que modifique ese css encontrará rápido lo que busca de una vez. Pero como vas a ser tú el único que toque el css, crealo como te plazca y te sea más fácil encontrar cada sección del css.