significado - ¿Cómo llegar a CSS zen?

zen garden plants vs zombies (15)

Eso es porque muchas de las "técnicas" son trucos o hacks y
Lo que sea que quieras decir con CSS zen, lo alcanzas trabajando duro. 10000 horas de trabajo, para ser precisas, si se debe creer a Gladwell.

CSS parece un conjunto de trucos para mí. Cada vez que leo acerca de alguna técnica de CSS, se parece mucho más a los trucos que a las técnicas. Cuando escribo CSS, a menudo necesito adaptar la estructura html y me siento mal.

¿Alguno de ustedes tuvo alguna iluminación y disfrutan CSS zen? ¿Cómo llegaste a CSS zen?

Los restablecimientos de CSS son increíblemente útiles.
Después de un tiempo aprendes los diferentes errores (principalmente en IE) y los evitas.
CSSEdit en Mac tiene más que ver con mi conocimiento de CSS que con cualquier otra cosa. Es simple y sorprendente. Firebug tiene una habilidad similar aquí, pero no es tan impresionante.

La mayoría de mis cosas funcionan en todos los principales navegadores desde el principio, a pesar de que desarrollo en webkit. Solo proviene de hacer muchas y muchas y muchas y muchas CSS.

CSS tiene que ser mi parte favorita del desarrollo. No lo consideraría una "bolsa de trucos". Es un lenguaje bien pensado con la capacidad de hacer casi cualquier diseño.

La única vez que afecta mi HTML es cuando necesito hacer algunos efectos de JavaScript (como deslizar los cajones, etc.), y generalmente eso solo significa poner un envoltorio alrededor de las cosas.

¿Te quedas en el css Zen Garden?
www.csszengarden.com

Antes que nada, separar por completo el contenido y la presentación, y me refiero a COMPLETAMENTE, así que ... no más

<strong class="red">[...]</strong>

(Tristemente veo esto demasiado) y todas esas otras cosas.

Las clases de css (y los id) deben describir el contenido, no definir el estilo. por ejemplo, esto está perfectamente permitido:

<div id="question"> <p>[...]</p> </div> <div id="answers"> <div class="answer"> <p>[...]</p> <div class="comment"><p>[...]</p></div> <div class="comment"><p>[...]</p></div> </div> <div class="answer"> <p>[...]</p> </div> </div>

tienes suficientes clases de etiquetas e identificadores para hacer algo, sin embargo, no hay diveritis o lógica de presentación dentro de él.

recuerda ... lo más importante para alcanzar CSS zen es HTML extremadamente bien formado sin sufrir diveritis

Además, si lees sobre un truco de CSS, por lo general no está muy optimizado. El ejemplo que dio probablemente sea más general y finalmente funcione con codificación normal. Sin embargo, la persona que encontró esta versión no siguió adelante, ya que encontró lo que necesitaba.

Una última nota es diseñar primero para el contenido e incluir el HTML para las características más adelante.

CSS zen es MENOS CSS

LESS es una extensión CSS que permite la reutilización y el encapsulamiento de valores (por ejemplo, valores de color), mejora la herencia, permite un mejor anidamiento de propiedades y operaciones relacionadas también.

Hay una Edición .NET para LESS CSS.

Como han mencionado las otras publicaciones, el dominio de CSS viene con la práctica (un par de proyectos de pequeño y mediano tamaño deberían ser suficientes para llevarlo a un nivel avanzado y comprender mejor los "marcos" (citado porque no he investigado si hay alguno) Marcos HTML, pero esa es la mejor palabra que se me ocurre para describir la separación HTML / CSS de contenido y estilo) utilizada por los desarrolladores actuales).

Algunos buenos recursos que puede consultar son el Tutorial / Referencia de W3Schools CSS y, por supuesto, una simple búsqueda en Google para encontrar todos esos hacks de compatibilidad entre navegadores (o relacionados con el modelo de caja).

Comprenda el modelo de diseño básico de CSS.

La unidad básica es la caja . Los elementos HTML de nivel de bloque como BODY, P, H n etc. corresponden a un cuadro en el diseño.

Una caja es rectangular , y por defecto se expande horizontalmente al ancho disponible. Verticalmente están apilados. El recuadro se puede anidar, por ejemplo, un recuadro P se anidará al menos dentro de un CUERPO-caja.

Las cajas pueden tener margen, borde y relleno, de acuerdo con el modelo de caja : http://www.timofejew.ca/2006/css-box-model-hierarchy/

Entonces, tienes una pila vertical (o columna) de cajas anidadas. Si quiere que algunas cajas se muevan fuera de la columna principal, por ejemplo, como una barra lateral, flota ( float: left|right ) y se mueve al borde izquierdo o derecho del bloque contenedor, y la pila principal se ajusta.

Si desea que las cajas se distribuyan horizontalmente (en lugar de verticalmente), use display:inline-block .

Si necesita una cuadrícula donde los bordes de las cajas están alineados en dos dimensiones, use display:table . Pero como IE antes de la versión 8 no es compatible, puede optar por "hacer trampa" y usar tablas de marcado HTML para crear la cuadrícula.

Si desea colocar un recuadro completamente independiente del flujo de recuadros, use el posicionamiento absoluto, que colocará el recuadro exactamente donde desea, posiblemente superponiendo otro contenido.

Considero que CSS es increíblemente útil para volver a utilizar y organizar mi diseño y código. No puedo imaginarme el desarrollo de un sitio sin utilizar una buena cantidad de CSS, y dado que es un lenguaje relativamente sencillo, es fácil hacer cambios rápidos en un conjunto de elementos sin tener que buscar entre miles de líneas de código. Tal vez soy ingenuo, pero me encanta CSS.

Siento que estoy usando ''trucos en lugar de tequniques'' con Javascript. Aunque también es imprescindible para cualquier sitio dinámico, me hace sentir bastante sucio para hackear juntas un conjunto de funciones que envía solicitudes asincrónicas (principalmente) porque simplemente se ve más fresco :).

Cuanto más uses CSS, mejor obtendrás; eso es todo lo que realmente tiene que hacer. Puede leer técnicas de CSS todos los días, pero no recordará nada hasta que lo use.

El dominio de CSS no implica conocer un truco específico para una situación específica (para eso es Internet), sino más bien ser capaz de encontrar un nuevo truco para una nueva situación.

El camino hacia la iluminación llega cuando te das cuenta de que CSS es ideal para diseñar elementos pero es horrible para definir el diseño. Así que solo con la excepción de los diseños complejos de navegadores cruzados, nunca se te ocurrirá una solución tan clara y agradable como cabría esperar. ¡Ah, y exceptuando la revelación de que IE6 fue puesto en esta Tierra como un medio para poner a prueba tu paciencia hasta el punto de ruptura, también sería útil!

La única propiedad de CSS que cambió mi percepción completa de CSS se mostró. En mi opinión, esa es la propiedad que te hace darte cuenta de que CSS es un lenguaje para diseñar no solo documentos HTML sino documentos XML arbitrarios (y, en teoría, cualquier estructura de datos jerárquica). Cuando lo hayas entendido, hay mucho más que puedes hacer con el lenguaje.

Para ser más específico: no hay nada inherente en un elemento de paragraph que lo haga aparecer en la página como un bloque: sucede que la hoja de estilo predeterminada de la mayoría de los navegadores (si no todos) establece la propiedad de display para block . Podría haber estado en inline o algo completamente loco como list-item . Cuando superas la creencia de que hay algo intrínsecamente especial sobre algunas propiedades de CSS cuando se aplican a ciertos elementos HTML, te abre la puerta a la comprensión de CSS en un nivel diferente. Por impráctico que pueda ser, creo que las personas aprenderían CSS más a fondo si los navegadores no incluyen ninguna hoja de estilo predeterminada (o, más específicamente, si todos los elementos se han inicializado con los mismos valores predeterminados).

Esto me lleva a un aspecto específico de HTML / CSS que se ha abordado anteriormente en este hilo: ¿Se deberían usar tablas para marcar formularios? Creo que no es un problema, y creo que los diseñadores que se niegan rotundamente siguen mirando el marcado HTML también de forma presentacional, aunque sus intenciones sean las contrarias. Dejame explicar:

Primero, veamos el elemento ul , que se usa para representar una lista de elementos desordenados. Tradicionalmente, este tipo de lista se muestra como una pila vertical de los elementos, con viñetas delante de cada uno. Sin embargo, en los últimos años, ul se usó para marcar cosas como menús de navegación, con los artículos alineados horizontalmente y sin balas a la vista. Esto se debe a que el significado de ul se toma semánticamente, no de forma presentacional. En otras palabras: no importa cómo se representará visualmente la lista de elementos; si lo que estamos tratando encaja con el concepto de una lista desordenada, podemos y debemos usar el elemento ul para ello. De eso se trata el HTML semántico.

Ahora, veamos el elemento de la table . Tradicionalmente, las tablas se muestran como una colección de filas y columnas, con encabezados arriba y / o a la izquierda de los datos de la tabla. Sin embargo, reconociendo el propósito de la propiedad de display , sabemos que esto no es necesariamente así: si configuramos la table y todos sus elementos secundarios para display: inline , se verá como un simple desastre, y si usamos display: list-item para nuestras filas o celdas, podemos hacer que una tabla se parezca más o menos a una lista desordenada (o incluso ordenada). Una vez más, no estamos tratando de capturar la representación visual tradicional de una tabla; estamos tratando de capturar la estructura de datos real que representa una tabla.

¿Qué estructura de datos corresponde más a un elemento de table ? Si me preguntas, hay una respuesta dada: la matriz bidimensional. Para ilustrar mi punto, veamos una posible forma de representar una matriz bidimensional en XML:

<parent-array> <child-array-keys> <key>Name</key> <key>Age</key> <key>Country</key> </child-array-keys> <child-arrays> <array> <value>Mike</value> <value>35</value> <value>England</value> </array> <array> <value>Jakob</value> <value>22</value> <value>Sweden</value> </array> <array> <value>Gerhardt</value> <value>29</value> <value>Germany</value> </array> </child-arrays> </parent-array>

¿No podría esa estructura de datos representarse de esta manera tan familiar ?:

<table> <thead> <th>Name</th> <th>Age</th> <th>Country</th> </thead> <tbody> <tr> <td>Mike</td> <td>35</td> <td>England</td> </tr> <tr> <td>Jakob</td> <td>22</td> <td>Sweden</td> </tr> <tr> <td>Gerhardt</td> <td>29</td> <td>Germany</td> </tr> </tbody> </table>

Los nombres de los elementos son diferentes, pero la estructura de datos es la misma. Combine esto con el hecho de que la propiedad de display nos permite representar cualquier estructura de datos jerárquica de muchas maneras diferentes, y espero que esté de acuerdo conmigo en que una tabla no es una tabla porque tiene cierto aspecto, sino porque representa una estructura de datos particular .

Dependiendo de la complejidad de su formulario, puede o no ajustarse a los criterios de una matriz bidimensional. Incluso si no lo hace, debe tenerse en cuenta que una tabla también puede usarse para representar una única matriz asociativa, con el elemento th en cada tr representa la clave y el elemento td que representa el valor. En el caso de tal forma, podría decir que una lista de definición ( dl ) también podría usarse, y eso es cierto. En este caso específico, sin embargo, me gustaría ver los beneficios y desventajas de implementación de cada solución:

En primer lugar, no hay forma de unir explícitamente un elemento dt y dd (a diferencia de HTML 5 o XHTML 2; se me olvida cuál). El uso de una tabla, sin embargo, permite precisamente eso, con el elemento tr agrupando explícitamente los valores de una "matriz" bajo un elemento común.
En segundo lugar, no hay forma de usar de forma confiable la display: table y propiedades CSS relacionadas entre navegadores en una lista de definiciones, lo que le obliga a usar técnicas flotantes que son inherentemente más limitadas si desea que su formulario se distribuya como una tabla tradicional . Las tablas, por supuesto, tienen esta funcionalidad inherentemente a través de las hojas de estilo predeterminadas de cada navegador de uso común, y pueden tener valores de display completamente diferentes asignados si es necesario.

Afortunadamente, no ablandé tu pregunta innecesariamente con reflexiones sobre el uso de tablas HTML combinadas con CSS; Simplemente sentí que era necesario destacar los conceptos detrás de CSS.

Leí una excelente presentación llamada " CSS orientado a objetos ", y desearía haberla leído antes de comenzar mi más reciente proyecto a largo plazo.

2 Principios principales:

Estructura y piel separadas
Contenedor y contenido separados

La presentación pasa a detallar 10 mejores prácticas y 9 trampas.

Combine lo que le enseña con un amplio uso del complemento de Google PageSpeed para Firefox . Le dirá qué selectores de CSS podrían ser más eficientes y cómo hacerlos más eficientes.

No estoy muy seguro de entender lo que quieres decir, sin embargo, la mayoría de mi código HTML está dictado por mi CSS. Probablemente no sea la mejor manera de hacerlo, pero trato de no usar tablas ni divisiones tantas veces como sea posible. Desde el diseño hasta la apariencia, así como en cualquier otro lugar donde pueda aplicar CSS.

Creo que CSS es una gran herramienta y más que trucos. Es una forma completamente diferente de ver las cosas.

Recuerde que cualquier cosa que haga puede ser reemplazada, y que su sitio debe ser adaptable para cambiar.

Luce bien desnudo.

El contenido es el rey. Los sitios web no se diferencian de los libros en que dan formato al texto de una manera que es agradable, visualmente, para el lector, pero si quita el contenedor, el sitio debe seguir fluyendo como lo haría un documento.

La mejor manera de saber que lo has hecho bien es una vez que hayas eliminado todo el CSS, de esta manera puedes obtener los huesos de tu jerarquía de información, y si todo parece que todo tiene el mismo peso, se ha hecho mal.

Al usar elementos HTML para su significado semántico, está haciendo algo más que reducir la cantidad de divs que está usando, está creando significado para su documento. Los motores de búsqueda dan más peso a las páginas que tienen el término de búsqueda en el título que en el contenido del cuerpo. Los lectores de pantalla dan énfasis a los títulos, no porque parezcan más grandes, sino porque les ha dado prioridad en el documento.

<div class="heading">What I ate for breakfast</div> <div class="paragraph">Cereal, orange juice, toast.</div>

Aunque esto funciona desde una perspectiva de presentación, tiene mucho menos significado que esto:

<h1>What I ate for breakfast</h1> <p>Cereal, orange juice, toast.</p>

Siendo aún más estricto, podría descomponer lo que comí para el desayuno en una lista desordenada, pero eso puede considerarse excesivo para este breve ejemplo. El punto es que al usar HTML como descripción de su contenido, se beneficia a todos, a usted mismo para una mejor clasificación de búsqueda y a sus lectores utilizando métodos alternativos para mostrar la página.

No todos son iguales.

Diseñar para la web ciertamente no es diseñar para imprimir. Tienes que hacer que tu sitio se vea bien para tus lectores, en cualquier plataforma que decidan usar: Mac OS X, Windows, Linux, iPhone, dispositivo móvil, etc. Antes de que apareciera el iPhone, los navegadores móviles eran una mierda . La mayoría todavía lo hace, y en estos casos, una vez que haya escrito su marcado semánticamente correcto, podrá volver a diseñar el sitio. Después de todo, CSS incluye soporte para diferentes medios, incluidos, entre otros, pantalla de computadora, proyector, dispositivo móvil e impresión. , lector de pantalla, etc.

No todas las computadoras son iguales: los colores pueden ser diferentes, las fuentes instaladas pueden ser diferentes, bueno, podrían estar usando IE6. Nunca haga sentir al usuario que el navegador que tiene es inadecuado con mensajes emergentes que dicen "Su navegador no está actualizado". En cambio, adaptarse Incluye familias de fuentes de amplio rango que cubren las últimas y mejores fuentes mezcladas con las usadas comúnmente más abajo en el árbol. Mejore su sitio progresivamente, para que pueda tener un excelente diseño en IE, y hacerlo aún mejor para los usuarios de Safari / Firefox con cosas como la multicolumna CSS3 o múltiples imágenes de fondo.

Código con sensatez

En tercer lugar, solo quiero tocar las mejores prácticas de CSS. Es un error pensar que debe darle a todo un ID y una clase en su HTML. A menos que esté ejecutando una página que necesite esos ID para javascript, siempre debe comenzar sin las clases y agregarlas más adelante.

Utilice los selectores descendentes como p em { } , los selectores secundarios p > em { } y los selectores adyacentes p + em { } para orientar los elementos específicos. Es fácil predecir los patrones de cómo se diseñan los documentos, y no debería ser necesario crear clases ''solo porque''. Un buen truco que uso es la regla del element + * { } : aplica estilos a todo lo que viene después de cierto elemento y es útil para eliminar elementos flotados.

Prefiero consolidar muchas reglas comunes en una regla grande, por ejemplo, si quisiera un montón de elementos rojos, utilizaría algo como esto:

blockquote, a, h3 { color:red; }

Esto es mucho mejor que dar una clase a cada uno de estos elementos y, por supuesto, siempre puedes anular los estilos más adelante. Esta es la verdadera belleza de CSS, que cualquier regla general puede ser cancelada con una específica más adelante.

Esto resultó un poco más de lo planeado. Para resumir: escriba un gran código HTML que no necesite divs (a menos que tenga que hacerlo para diseñar soluciones), planifique su diseño para que sea un navegador cruzado, teniendo en cuenta todas las diferencias para cada usuario y el código mínimamente. Hay muchos más selectores, y solo mencioné algunos aquí - el punto es codificar sin clases a menos que realmente tengas que hacerlo.

comience a reutilizar las clases y apile las clases en los elementos, también familiarícese con las reglas de especificidad para que pueda anular algunos estilos según sea necesario, verá realmente rápidamente dónde es realmente útil y más que simples "trucos".