Share
Claro, cualquiera puede escribir CSS. Incluso los programas lo están haciendo por ti ahora. Pero, ¿es el CSS algo bueno? Aquí hay 5 consejos para comenzar a mejorar el tuyo..
Seriamente, Siempre use un reinicio de algún tipo. Si está utilizando el reinicio de Eric Meyer, el reinicio de YUI o su propio reinicio personalizado, solo use algo.
Puede ser tan simple como eliminar el margen y el relleno de todos los elementos:
html, cuerpo, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, dl, dt, dd, p, blockquote, pre, form, fieldset, table, th, td margen: 0; relleno: 0;
Los resets de Eric Meyer y YUI son impresionantes, pero para mí, van demasiado lejos. Siento que terminas restableciendo todo y luego redefiniendo muchas propiedades en los elementos. Es por eso que Eric Meyer recomienda que no solo tome su hoja de estilo de reinicio y suéltela en sus proyectos si existe una forma más efectiva de usarlo. Pellizcarlo Construir sobre ella Hazlo tuyo.
Oh y por favor, detén esto:
* margen: 0; relleno: 0;
Se necesita más tiempo para procesar, ¿y qué cree que debería pasar con un botón de radio cuando retira el relleno? Los elementos de forma a veces pueden hacer algunas cosas extrañas, por lo que puede ser mejor dejar solo algunas de ellas..
¿Qué ejemplo crees que es más rápido encontrar la propiedad de margen derecho?
div # header h1 índice z: 101; color: # 000; posición: relativa; altura de línea: 24px; margen derecho: 48px; borde inferior: 1px sólido #dedede; tamaño de fuente: 18px;
div # header h1 border-bottom: 1px solid #dedede; color: # 000; tamaño de fuente: 18px; altura de línea: 24px; margen derecho: 48px; posición: relativa; índice z: 101;
No puedes decirme que el Ejemplo 2 no es más rápido. Al alfabetizar sus propiedades, está creando esta consistencia que le ayudará a reducir el tiempo que dedica a buscar una propiedad específica..
Conozco algunas personas que se organizan de una manera y otras que se organizan de otra, pero en mi empresa, tomamos una decisión por consenso para organizarlas en orden alfabético. Definitivamente ha ayudado cuando se trabaja con el código de otras personas. Me estremezco cada vez que entro en una hoja de estilo donde las propiedades no están ordenadas alfabéticamente.
Debes organizar tu hoja de estilo para que sea fácil encontrar cosas y los elementos relacionados estén muy cerca. Usa los comentarios de manera efectiva. Por ejemplo, así es como estructuro mis hojas de estilo:
/ ***** Restablecer ***** / Eliminar el margen y el relleno de los elementos / ***** Elementos básicos ***** / Definir estilos para elementos básicos: cuerpo, h1-h6, ul, ol, a , p, etc. / ***** Clases genéricas ***** / Definir estilos para cosas simples como flotar hacia los lados, eliminar un margen inferior en los elementos, etc. Sí, estos pueden no ser tan semánticos como lo haríamos todos. como, pero son necesarios para la codificación eficiente / ***** Diseño básico ***** / Definir la plantilla básica: encabezado, pie de página, etc. Elementos que ayudan a definir el diseño básico del sitio / **** * Encabezado ***** / Definir todos los elementos en el encabezado / ***** Contenido ***** / Definir todos los elementos en el área de contenido / ***** Pie de página ***** / Definir todos los elementos en el pie de página / ***** Etc ***** / Continuar para definir las otras secciones una por una
Al usar comentarios y agrupar elementos similares, se vuelve mucho más rápido encontrar lo que está buscando.
De cualquier forma que decidas codificar, quédate con ella. Estoy harto y cansado de toda la línea 1 frente a las líneas múltiples para su debate sobre CSS. ¡No hay debate! Todos tienen su propia opinión, así que elige lo que funciona para ti y apégate a ella en toda la hoja de estilos..
Personalmente, uso una combinación de ambos. Si un selector va a tener más de 3 propiedades, lo divido en varias líneas:
div # header float: left; ancho: 100%; div # header div.column border-right: 1px solid #ccc; flotar derecho; margen derecho: 50px; relleno: 10px; ancho: 300px; div # header h1 float: left; posición: relativa; ancho: 250px;
A mí me funciona porque 3 propiedades es lo que cabe en 1 línea en mi editor de texto antes de ajustarlo en otra línea. Así que solo averigüe qué funciona para usted y sea consistente.
No te atrevas a tocar tu hoja de estilos hasta que hayas escrito tu marca!
Cuando me estoy preparando para dividir un sitio, reviso y marque todo el documento desde la etiqueta de cuerpo inicial hasta la etiqueta de cuerpo final, incluso antes de crear un archivo CSS. No agrego ningún divs, ids o clases superfluos. Agregaré algunos divs genéricos como encabezado, contenido, pie de página porque sé que estas cosas van a existir.
Al marcar el documento primero, no se encontrará con enfermedades como la divitis y la clasitis, que a veces pueden ser fatales. Solo debe agregar esas cosas una vez que haya comenzado a escribir el CSS y darse cuenta de que va a necesitar otro gancho para lograr lo que está tratando de lograr..
Utilice los selectores descendientes de CSS para apuntar a elementos de niños; no solo agregue automáticamente una clase o id al elemento. Solo recuerda, CSS no vale nada sin un documento bien formateado.
* Nota del editor: No puedo enfatizar este punto lo suficiente. Como dijo Trevor, ni siquiera toques tu archivo CSS hasta que el marcado esté completo al 100%.
Estos son solo algunos de los consejos que me ayudan a escribir mejor código. Esto no es de ninguna manera el final de la lista. A medida que surja con otros, compartiré.
¿Qué consejos tienes para escribir mejor CSS??
Accentsconagua