5 maneras de escribir mejor CSS
Es obvio, cualquiera puede escribir CSS. Incluso programas lo hacen por tí. ¿Pero lo que hacen es bueno? Aquí hay 5 tips para empezar a hacerlo por tu cuenta.
1. Reset
En serio, siempre usa un reset de varios elementos. Si estás usando el Eric Meyer Reset, o el YUI Reset, o tú solo haces los resets, sólo usa algo.
Puede ser tan simple como remover el margin y padding de todos los elementos:
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
Los reseteadores Eric Meyer y YUI Resets son excelentes, pero para mí, van demasíado lejos. Siento como que al final terminan reseteando todo, y después redefiniendo un montón de propiedades en los elementos. Esta es la razón porque Eric Meyer recomienda que no debes tomar su hoja de estilo con el reset y copiarla en tus proyectos si hay una forma más efectiva de usarla. Retuersela, construyela, hacela por tu cuenta.
Y por favor, paren de hacer esto:
* { margin: 0; padding: 0; }
Esto toma más tiempo para procesar, ¿y qué crees que le debe suceder a un botón "radio" cuando le remueves el padding? Elementos para formularios a veces pueden hacer cosas copadas, así que puede ser mejor dejar algunos de ellos solos.
2. Alfabetización
Una pequeña pregunta
¿Cúal ejemplo pensarías que es el más rápido para encontrar la propiedad margin-right?
EJEMPLO 1
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
EJEMPLO 2
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
No podés decirme que el ejemplo 2 no es rápido. Alfabetizando tus propiedades, estás creando esta consistencia que te ayudará a reducir en tiempo que gastas buscando una propiedad específica.
Conozco alguna gente que se organiza de una manera y otra que se organiza de otra, pero al menos yo, lo hago alfabeticamente. Esto le ha ayudado a otra gente a organizarse mejor con mi código. Me caliento siempre que veo una hoja de estilos donde las propiedades no están alfabeticamente.
3. Organización
Debés organizar tus hojas de estilo, entonces es fácil para encontrar cosas e items relacionados que están juntos. Usa comentarios. Por ejemplo, así es como estructuro mis hojas de estilos:
/*****Reset*****/ Remove margin and padding from elements /*****Basic Elements*****/ Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. /*****Generic Classes*****/ Define styles for simple things like floating to the sides, removing a bottom margin on elements, etc Yes, these may not be as semantic as we would all like, but they are necessary for coding efficiently /*****Basic Layout*****/ Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site /*****Header*****/ Define all elements in the header /*****Content*****/ Define all elements in the content area /*****Footer*****/ Define all elements in the footer /*****Etc*****/ Continue to define the other sections one by one
Usando comentarios y agrupando elementos similares, se hace mucho más rápido para encontrar lo que estás buscando.
4.Consistencia
Cualquiera sea la manera en que decidas codear, copate con esta. Estoy enfermo y cansado del debate entre 1 línea de CSS vs. múltipes líneas de CSS. ¡No hay debate! Cada uno tiene su propia opinión, entonces busca lo que funciona para tí y apégate a esta a través de las hojas de estilo.
Personalmente, uso una combinación de ambas. Si un selector va a tener más de 3 propiedades, lo rompo en múltiples líneas:
div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: right;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }
Esto funciona para mí porque 3 propiedades es lo que se adapta en 1 línea en mi editor de texto antes de cortarse en otra línea. Entonces sólo resuelve lo que funciona para tí y se consistente.
5. Empezar en el lugar correcto
¡No te atrevas a tocar tu hoja de estilo hasta que hayas escrito tu información adicional!
Cuando estoy preparando una parte de un sitio, voy hasta el fín y coloco información adicional desde el <body> hasta el </body> incluso antes de crear el archivo de CSS. No agregues ningún superfluo div, id o class. Agregaré algunos divs genéricos como header, content, footer, porque se que estas cosas van a existir.
Agregando información adicional al principio, no te quedarás en enfermedades como la "divitis" y la "classitis", las cuales a veces pueden ser fatales! Sólo necesitas agregar esas cosas una vez que hayas empezado a escribir el CSS y darse cuenta que vas a necesitar algún "gancho" para lograr lo que estás tratando de realizar.
Conclusión
Estos son sólo alguno de los tipcs que me ayudan a escribir mejor código. Esto no significa que sea la final de la lista. Ahora animate a escribir los tuyos.
¿Qué tips tienes para escribir mejor CSS?
Escrito por Trevor Davis de NetTuts+. Traducción por Alejandro Astete de Ranasofía
Efecto Focus en inputs y textareas
La simplicidad que nos brinda CSS para hacer efectos que se podrían hacer con JS es increíble. Con tan solo un poco de CSS y una propiedad class dentro de una etiqueta de HTML se puede lograr un hermoso efecto focus en un input o textarea.
Se puede ver como queda:
La inserción es fácil, en nuestro CSS agregamos lo siguente.
input:focus, textarea:focus{ background-color: lightyellow; }
Ahora simplemente en una etiqueta <input> o <textarea> automáticamente se pondrá del color que elegimos en el parámetro background-color o background. Obviamente se puede agregar imágenes de fondo, pero eso es otro tema 
.
Con un saludo me despido! Suerte! 
Globo de comentarios con CSS
Hola! es es un script que encontré navegando, ya estaba medio viejo, era de 2007, tome un codigo hecho por Will Mayo y lo mejore a mi estilo, quitandole el javascript para
redondear las puntas, y lo hice con css... se ve perfecto en Google Chrome y Mozilla Firefox.
CrazyCurve – Globito flashero en CSS
Wow! Que globito flashero... un efecto de la puta madre que NUNCA se me hubiera ocurrido y se puede adaptar facilmente a algún que otro bloque del script SPirate.
El tema es así, agregamos en el CSS los dos wrapper que nos servirán para los dos diferentes colores que tiene este efecto, bordó y azul.
#wrapper { text-align: left; width: 500px; margin: 30px auto; border: 1px solid #c00; padding: 15px 15px 5px 15px; background: url(redCurve.gif) 0 0 no-repeat; } #wrapper2 { text-align: left; width: 500px; margin: 30px auto; border: 1px solid #185dab; padding: 15px 15px 5px 15px; background: url(blueCurve.gif) right 88px no-repeat;
Las dos imágenes son:
Y ahora el azul:
El #wrapper es para el bordó y el #wrapper2 es para el azul.
/* RED CURVES */ .curve { float: left; display: block; height: 16px; clear: left; } #curve1 { width: 230px; } #curve2 { width: 225px; } #curve3 { width: 220px; } #curve4 { width: 215px; } #curve5 { width: 210px; } #curve6 { width: 198px; } #curve7 { width: 180px; } #curve8 { width: 170px; } #curve9 { width: 160px; } #curve10 { width: 160px; } #curve11 { width: 140px; } #curve12 { width: 120px; } #curve13 { width: 80px; } /* BLUE CURVES */ .curve2 { float: right; display: block; height: 16px; clear: right; } #curveSpacer { width: 1px; height: 80px; } #curve14 { width: 65px; } #curve15 { width: 85px; } #curve16 { width: 105px; } #curve17 { width: 115px; } #curve18 { width: 125px; } #curve19 { width: 130px; } #curve20 { width: 125px; } #curve21 { width: 120px; } #curve22 { width: 118px; } #curve23 { width: 110px; } #curve24 { width: 104px; } #curve25 { width: 93px; } #curve26 { width: 80px; } #curve27 { width: 60px; } #curve28 { width: 40px; }
Ahora el class .curve es para el bordó y el .curve2 es para el azul. Y la integración es muy fácil. En una plantilla o donde quieras en tu web agregás:
<div id="wrapper"> <span id="curve1" class="curve"></span> <span id="curve2" class="curve"></span> <span id="curve3" class="curve"></span> <span id="curve4" class="curve"></span> <span id="curve5" class="curve"></span> <span id="curve6" class="curve"></span> <span id="curve7" class="curve"></span> <span id="curve8" class="curve"></span> <span id="curve9" class="curve"></span> <span id="curve10" class="curve"></span> <span id="curve11" class="curve"></span> <span id="curve12" class="curve"></span> <span id="curve13" class="curve"></span> CONTENIDOOOOOO BORDOOO
</div>
Ese para el bordo y para el azul el siguiente:
<div id="wrapper2"> <span id="curveSpacer" class="curve2"></span> <span id="curve14" class="curve2"></span> <span id="curve15" class="curve2"></span> <span id="curve16" class="curve2"></span> <span id="curve17" class="curve2"></span> <span id="curve18" class="curve2"></span> <span id="curve19" class="curve2"></span> <span id="curve12" class="curve2"></span> <span id="curve21" class="curve2"></span> <span id="curve22" class="curve2"></span> <span id="curve23" class="curve2"></span> <span id="curve24" class="curve2"></span> <span id="curve25" class="curve2"></span> <span id="curve26" class="curve2"></span> <span id="curve27" class="curve2"></span> <span id="curve28" class="curve2"></span> CONTENIDOOOOO AZUL
</div>
Y si quieren ver una demo la pueden ver aquí.
Un saludo grande!!! 
Crea botones CSS – CSSTrick Button Maker
Bueno, les dejo una pagina que a mi me fue muy util, porque aveces aunque sepamos los codigos CSS no llegamos al efecto deseado, pero con esta herramienta es todo mas facil, ya que nos va mostrando el resultado de nuestro codigo mientras lo armamos de una forma muy intuitiva.
Enlace: ButtonMaker
Optimizar CSS
Optimizar los archivos CSS es una buena forma de ahorrar ancho de banda.
Para hacer esto existe una herramienta que puede llegar a ahorrarnos un determinado porciento de ancho de banda. CSS Drive, nos permite reducir el tamaño de los archivos CSS considerablemente. Aunque todo depende, de cuan legible deseemos que quede la hoja de estilos.
En mi caso en el modo Light, que solo quita los espacios innecesarios me redujo mi css en un 16% y otro mucho mayor en un 9%.
Me presento
Buenas gente. Algunos me conocen, otros no, soy FeDeX de sp, de muchos sitios 
Estoy acá para ayudarlos a comprender lo que a mi me costo mucho comprender, el correcto funcionamiento y aplicación de los códigos PHP.
También me interesa el CSS y publicare tutoriales y enlaces sobre este tema.
Espero colaborar, y ayudarlos.
Atte FeDeX
