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
Aún no hay trackbacks.
