¿Mejores prácticas para el diseño de páginas web con CSS? [cerrado]

7

Tengo un sitio web para diseñar. Tengo información sobre cómo debe verse e interactuar la página. El problema es que no soy bueno en el diseño de front-end, y he puesto muchas horas para entender el problema. Actualmente utilizo el CSS de los sitios de muestra en github para darle estilo a mi sitio, lo que parece ser una forma poco ética.

Pregunta: ¿cómo diseñas las páginas web?

  • ¿Hay algunas herramientas realmente buenas?
  • Agradecería profundamente que se proporcione una respuesta detallada o que el enlace a wiki también funcione.
pregunta adifire 06.07.2012 - 14:12

5 respuestas

9

Es realmente un ARTE escribir tu propio CSS y puede llevarte mucho tiempo dominarlo. Sin embargo, hay algunos atajos rápidos. Básicamente, reutilizar las plantillas existentes y modificarlas ligeramente puede producir resultados en menos tiempo. Existen algunas Herramientas gratuitas para trabajar con CSS - 50 herramientas CSS extremadamente útiles y poderosas .

Por lo tanto, comenzar desde una plantilla es la forma más fácil y rápida para el desarrollador web. Hay algunos buenos sitios de plantillas GRATUITAS que son muy útiles. Además, hay un buen estilo css por unos pocos dólares. Aquí hay una lista de sitios de plantillas que prefiero visitar cuando se requiere un buen estilo CSS.

Aquí hay algunos buenos lugares para aprender CSS. Los tomé del enlace de W3Tools en mi comentario:

respondido por el EL Yusubov 06.07.2012 - 15:22
4

Hay varios enfoques diferentes, cada uno con sus ventajas y desventajas, y la mayoría de ellos están vinculados a un flujo de trabajo en particular.

En equipos grandes, donde el trabajo se divide en 'diseño de gráficos', 'diseño de interacción', 'rebanado', 'scripts de front-end' y 'codificación de back-end', cada trabajo realizado por una persona diferente, la parte de CSS es el trabajo de la persona que hace el corte en rodajas, y debido a que esa persona controla tanto el HTML como el CSS, pueden hacerlo prácticamente a su gusto. A menudo, usan herramientas como Dreamweaver; esto permite la edición WYSIWYG, pero el HTML / CSS resultante es a menudo un poco desordenado y difícil de mantener, lo cual está bien si el proceso exige establecer el diseño en piedra antes de escribir cualquier código: una vez que se entrega a los programadores, el diseño no es va a cambiar, por lo que no tiene sentido gastar un esfuerzo adicional en la mantenibilidad.

Sin embargo, a menudo, los equipos son más pequeños y el sitio debe ser más dinámico y más fácil de mantener. En tal situación, es importante escribir CSS escalable y adaptable. Lo que encontré funciona razonablemente bien es esto:

  • Comience con algunas reglas de "reinicio". Puede usar una hoja de estilo de reinicio de propósito general preescrita (busque en google, hay un montón de buenas disponibles en la red), o puede escribir algunas reglas simples usted mismo. Algunas personas no creen en las hojas de estilo de reinicio; Es realmente una cuestión de gusto y filosofía, por lo que es posible que desee anular la apariencia predeterminada de los elementos que no le gustan.
  • Mantenga su HTML semántico, es decir, escríbalo de manera que refleje la estructura de su documento, no la apariencia. Cargue el HTML sin ninguna hoja de estilo en absoluto. Aún no tiene que verse como se esperaba, pero debería presentarse en una estructura lógica.
  • Cree el estilo general escribiendo reglas que coincidan con los nombres de los elementos ( div , dd , input , a , ...) y, donde sea necesario, pseudo-elementos / pseudo-clases ( a:hover , a:visited , ...), y selectores de atributos (necesita aquellos para distinguir entre diferentes tipos de entradas, por ejemplo, input[type=text] ). Pruébalos en una pieza genérica de HTML, por ejemplo. la salida de enlace . Esta va a ser su apariencia por defecto; la mayor parte de su sitio debería verse bien solo con estas reglas.
  • Ahora le quedan algunos elementos del sitio que aún no tienen el aspecto que desea. Para aquellos, agregue nombres de clase que describan, semánticamente , qué es el elemento (o un aspecto de lo que es). Los ejemplos son cosas como <input type="submit" class="default-button"/> , <div class="validation-errors"> , etc. No use nombres de clase para describir las propiedades de presentación ( <span class="red large"> , <div class="float-right"> ): tienden a diferir de las reglas reales con el tiempo y luego termina. con la clase float-right flotando a la izquierda o alguna de esas tonterías. Estilo esos elementos basados en sus nombres de clase. Por ejemplo, si tu botón predeterminado debería ser más grande, usarías .default-button { font-size: larger; } (o un porcentaje si te gustan más).
  • Evite los estilos en línea a toda costa.

Desarrolle en un navegador sano (Firefox, o cualquier cosa basada en webkit); una vez que lo tengas todo funcionando, pruébalo al menos en Firefox, Webkit y Opera. Probablemente se va a romper en IE; use comentarios condicionales para incluir hojas de estilo adicionales para las distintas versiones de IE que tiene que admitir, agregando cualquier hacks que necesite para que funcione.

En cuanto a herramientas van; realmente no necesita más que un editor de texto y un navegador para probar. Firebug o un complemento equivalente de inspector de documentos es una gran ayuda (Google Chrome / Chromium tiene una herramienta similar incorporada), especialmente porque le permite modificar estilos dentro del navegador: no persistirán, pero puedes probar cosas rápidamente para ver qué funciona.

En el lado del servidor, hay algunas tecnologías que le permiten tomar accesos directos, básicamente, toman una hoja de estilo escrita en un superconjunto de CSS, añadiendo cosas como variables, reglas anidadas, etc., y la transforman en CSS normal Antes de enviarlo al navegador. Los lenguajes de plantilla de cassius y lucius (para Haskell) son buenos ejemplos, pero existen soluciones para muchos lenguajes de programación.

    
respondido por el tdammers 06.07.2012 - 14:41
2

La mayoría de los verdaderos desarrolladores web escribirán su propio CSS y HTML desde cero. Las herramientas pueden ser útiles para probar o ajustar las reglas CSS, pero cualquier cosa que diga que lo haga por usted es más problemática de lo que vale la pena.

Aprender a usar HTML y CSS correctamente es algo que lleva tiempo, al igual que aprender cualquier otra tecnología. No hay atajo; la práctica te llevará allí.

Dicho esto, algunos editores WYSIWYG, como Dreamweaver, tienen soporte para editar reglas CSS que proporcionan autocompletado. Encontré esto muy útil cuando estaba empezando (pulsa ctrl + espacio para ver una lista de todas las posibles reglas de CSS).

    
respondido por el Tom Marthenal 06.07.2012 - 14:30
1

Algunas pautas además de todos los otros consejos:

  1. Usa una hoja de estilo de restablecimiento para lograr la misma apariencia básica en todos los navegadores, por ejemplo. Reinicio de HTML5 .
  2. Proporcione a los elementos fondos de color "feos" cuando comience a trabajar con tamaños / márgenes / rellenos de caja para ver el funcionamiento del modelo de caja. Ayuda, especialmente cuando estás empezando con CSS.
  3. Usa algunos valores genéricos para tu CSS y modifica esos valores usando Firebug o algo más.
  4. Intenta mantener tu CSS modular en lugar de meterte en "guerras de especificidad" (hmm, ¿por qué no se aplica mi estilo li.special-class ? Ah, hay #my-wrapper li en otra parte). Podría aplicar la metodología SMACSS o C4S orientado a objetos .
  5. No sobreestime la necesidad del mismo aspecto en todos los navegadores. Sirva esquinas redondeadas que los entiendan, pero no use gráficos para servir a IE6. Los sitios web no son como revistas, sino más bien como canales de televisión.
respondido por el Residuum 06.07.2012 - 23:45
-3

La mayoría de los desarrolladores web usarán una combinación de algún editor (ya sea una herramienta como Dreamweaver o algo tan simple como un bloc de notas) y un navegador web. Pasan por un proceso de creación de las reglas de marcado y estilo pieza por pieza, actualizando el navegador en cada etapa para ver si se ve y se comporta cómo pretenden. Fuera de un editor y un navegador, en realidad no se requieren herramientas especiales para el desarrollo web frontend, sin embargo, existen herramientas como Firebug que son extremadamente útil.

Parece que necesitas aprender CSS correctamente, para que puedas escribirlo tú mismo. Hay muchos lugares buenos para aprender y hacer referencia en Internet, pero mi favorito personal es enlace .

    
respondido por el Andy Hunt 06.07.2012 - 14:29

Lea otras preguntas en las etiquetas