OOCSS - Poniendo OOrden en CSS.
¿Qué es OOCSS? Una forma de optimizar la organización y arquitectura de los estilos CSS. En esta presentación veremos qué problemas trata de resolver, qué principios sigue y cómo aplicarlos.
O documento resume três padrões de arquitetura CSS - OOCSS, SMACSS e BEM. OOCSS foca em separar estrutura e apresentação, SMACSS organiza CSS em módulos para reutilização e manutenção, e BEM nomeia classes de forma consistente para componentes reutilizáveis.
OOCSS in the Real World: A Case Study from the CBC with Jamie StrachanFITC
Presented at SCREENS 2013 in Toronto.
Details at fitc.ca/screens
Object Oriented CSS is starting to gain serious traction in the web development world. OOCSS, SMACSS, BEM, Twitter Bootstrap, inuit.css, Pure… all of these share underlying principles that force us to re-evaluate our best practices. This is daunting enough for the average site but borders on lunacy for one of the biggest and most popular sites in Canada: CBC.ca.
This session is a look at the process we went through at the CBC to overhaul our site’s front-end and bring in OOCSS practices. We’ll discuss what OOCSS is and the benefits it offers. You’ll learn about the biggest challenges we faced and how we overcame them (or at least hacked our way through) and you’ll come away with practical ideas about how to embark on your own OOCSS adventure.
This document provides an overview of CSS Flexbox including:
1) An introduction to Flexbox and its advantages over other layout methods like floats and grids.
2) Examples of how to use Flexbox properties to control layout including flex-direction, flex-wrap, justify-content, align-items and more.
3) Real world use cases demonstrating how Flexbox can be used for tasks like vertical alignment, equal height columns, and responsive layouts.
Adobe Flash Player es una aplicación que reproduce archivos SWF creados con Adobe Flash u otras herramientas. Permite reproducir animaciones vectoriales, audio, video e interactividad en navegadores a través de un complemento. Ha evolucionado para admitir nuevos formatos multimedia, lenguajes de programación como ActionScript y características como reproducción en pantalla completa.
Este documento describe una metodología para el desarrollo de proyectos front-end a gran escala basada en los principios de modularización, encapsulamiento y reutilización de código. Se recomienda el uso de BEM para nombrar bloques, elementos y modificadores, combinado con Sass para controlar la especificidad y herencia. También sugiere extender marcos de componentes existentes para dotar a los bloques de funcionalidad común mediante el uso de @extend en Sass.
CSS se usa para controlar la presentación de documentos de forma más precisa que HTML. CSS ofrece beneficios como controlar la presentación desde una hoja de estilo, aplicar estilos a diferentes medios, y usar técnicas avanzadas. Las tablas CSS tienen propiedades como la posición del título y el espaciado entre bordes, y se componen de encabezamientos, celdas y títulos. Las tablas requieren espacio, relleno y un tratamiento adecuado de su contenido.
This document discusses the benefits of modular CSS and different methodologies for implementing it. It notes that CSS at scale can be difficult to understand, reuse, and maintain without modularity. It then explains Object-Oriented CSS (OOCSS), Block Element Modifier (BEM), and Scalable and Modular Architecture for CSS (SMACSS) as approaches for creating reusable, self-contained CSS modules. The key principles across these methodologies are separating components into logical blocks, elements, and modifiers; using descriptive naming conventions; and avoiding nesting and IDs. Following modular best practices makes CSS more predictable, maintainable, and performant at any scale.
O documento resume três padrões de arquitetura CSS - OOCSS, SMACSS e BEM. OOCSS foca em separar estrutura e apresentação, SMACSS organiza CSS em módulos para reutilização e manutenção, e BEM nomeia classes de forma consistente para componentes reutilizáveis.
OOCSS in the Real World: A Case Study from the CBC with Jamie StrachanFITC
Presented at SCREENS 2013 in Toronto.
Details at fitc.ca/screens
Object Oriented CSS is starting to gain serious traction in the web development world. OOCSS, SMACSS, BEM, Twitter Bootstrap, inuit.css, Pure… all of these share underlying principles that force us to re-evaluate our best practices. This is daunting enough for the average site but borders on lunacy for one of the biggest and most popular sites in Canada: CBC.ca.
This session is a look at the process we went through at the CBC to overhaul our site’s front-end and bring in OOCSS practices. We’ll discuss what OOCSS is and the benefits it offers. You’ll learn about the biggest challenges we faced and how we overcame them (or at least hacked our way through) and you’ll come away with practical ideas about how to embark on your own OOCSS adventure.
This document provides an overview of CSS Flexbox including:
1) An introduction to Flexbox and its advantages over other layout methods like floats and grids.
2) Examples of how to use Flexbox properties to control layout including flex-direction, flex-wrap, justify-content, align-items and more.
3) Real world use cases demonstrating how Flexbox can be used for tasks like vertical alignment, equal height columns, and responsive layouts.
Adobe Flash Player es una aplicación que reproduce archivos SWF creados con Adobe Flash u otras herramientas. Permite reproducir animaciones vectoriales, audio, video e interactividad en navegadores a través de un complemento. Ha evolucionado para admitir nuevos formatos multimedia, lenguajes de programación como ActionScript y características como reproducción en pantalla completa.
Este documento describe una metodología para el desarrollo de proyectos front-end a gran escala basada en los principios de modularización, encapsulamiento y reutilización de código. Se recomienda el uso de BEM para nombrar bloques, elementos y modificadores, combinado con Sass para controlar la especificidad y herencia. También sugiere extender marcos de componentes existentes para dotar a los bloques de funcionalidad común mediante el uso de @extend en Sass.
CSS se usa para controlar la presentación de documentos de forma más precisa que HTML. CSS ofrece beneficios como controlar la presentación desde una hoja de estilo, aplicar estilos a diferentes medios, y usar técnicas avanzadas. Las tablas CSS tienen propiedades como la posición del título y el espaciado entre bordes, y se componen de encabezamientos, celdas y títulos. Las tablas requieren espacio, relleno y un tratamiento adecuado de su contenido.
This document discusses the benefits of modular CSS and different methodologies for implementing it. It notes that CSS at scale can be difficult to understand, reuse, and maintain without modularity. It then explains Object-Oriented CSS (OOCSS), Block Element Modifier (BEM), and Scalable and Modular Architecture for CSS (SMACSS) as approaches for creating reusable, self-contained CSS modules. The key principles across these methodologies are separating components into logical blocks, elements, and modifiers; using descriptive naming conventions; and avoiding nesting and IDs. Following modular best practices makes CSS more predictable, maintainable, and performant at any scale.
OOCSS - Poniendo OOrden en CSS.
¿Qué es OOCSS? Una forma de optimizar la organización y arquitectura de los estilos CSS. En esta presentación veremos qué problemas trata de resolver, qué principios sigue y cómo aplicarlos.
Esta versión de la presentación incluye las notas del presentador.
Este documento trata sobre técnicas para escribir CSS de forma escalable y mantenible. Se discute que aunque la sintaxis de CSS es simple, escribirlo de forma desordenada puede causar problemas. Se recomienda seguir enfoques como OOCSS, SMACSS o BEM, y utilizar nomenclatura de clases claras y genéricas. También se enfatiza la importancia de separar la estructura del diseño, crear componentes reutilizables y aplicar principios de diseño como encapsulamiento.
Este documento introduce los frameworks CSS. Explica que son herramientas que abstraen tareas repetitivas de desarrollo CSS para aumentar la productividad. Explora ventajas como código más consistente y mantenible, e inconvenientes como curva de aprendizaje. Luego resume algunos frameworks populares como 1KB Grid, 960 Grid System, Blueprint y Bootstrap, destacando sus características como uso de retículas y facilidad de uso.
Este documento presenta una introducción a los frameworks CSS. Explica brevemente qué son los frameworks CSS y sus ventajas e inconvenientes. Luego, ofrece una panorámica de varios frameworks populares como 1Kb CSS Grid, 960 Grid System, Blueprint, Foundation y Bootstrap, describiendo sus características principales. Finalmente, discute algunos factores a considerar a la hora de elegir un framework para un proyecto en particular.
El documento proporciona información sobre Bootstrap, un framework de código abierto para desarrollo de sitios web y aplicaciones responsive. Explica que Bootstrap utiliza HTML, CSS y jQuery para crear sitios responsive basados en una grilla de 12 columnas. También describe algunas de las ventajas de Bootstrap como su facilidad de uso, gran comunidad de soporte y enfoque mobile-first.
La práctica 5 introduce las hojas de estilo en cascada (CSS). Explica que una página web está compuesta de contenido (HTML), presentación (CSS) y comportamiento (JavaScript). Enseña cómo usar la barra de herramientas Web Developer para inspeccionar y modificar páginas. Describe la estructura básica de CSS y los diferentes tipos: en línea, internos, vinculados e importados. Finalmente, pide aplicar estilos específicos para dispositivos como pantallas, impresión y móviles.
El documento proporciona una introducción a los frameworks para el desarrollo web. Explica que un framework es una estructura formada por componentes personalizables e intercambiables que aceleran el desarrollo de aplicaciones y permiten la reutilización de código. También describe algunos frameworks populares como 960 Grid System, Blueprint y Skeleton, y explica conceptos clave como maquetación, diseño visual y posicionamiento en buscadores.
Este documento proporciona una introducción a Bootstrap, el popular framework de código abierto para el desarrollo de sitios web y aplicaciones web. Explica los principios básicos de Bootstrap, incluida su rejilla de 12 columnas y enfoque "mobile-first". También describe varios componentes clave como etiquetas, desplegables, barras de navegación y formularios que se pueden utilizar para crear interfaces adaptables. Finalmente, cubre temas como la personalización de Bootstrap y el uso del preprocesador CSS subyacente Less.
Bootstrap es un framework de código abierto para el desarrollo de sitios y aplicaciones web. Utiliza HTML, CSS y JavaScript para crear diseños responsivos adaptables a diferentes dispositivos. Incluye componentes front-end como grillas, tipografía, formularios y botones preconstruidos.
El documento describe varios conceptos relacionados con los patrones de diseño web. Explica que un patrón de diseño es una solución a un problema de diseño recurrente y que existen varios tipos de patrones como patrones de creación, estructurales y de comportamiento. También cubre técnicas de diseño web como diseño de ancho fijo, líquido y híbrido, así como diseño para móviles.
Stylus es un preprocesador CSS que compila una sintaxis más simple y expresiva a CSS estándar. Ofrece características como nesting, mixins, herencia, importación de archivos y funciones de color para ahorrar tiempo y mejorar la organización y mantenibilidad del código CSS.
Desarrollo de temas de apariencia para Liferay 6.1Julio Camarero
Este documento describe cómo crear y personalizar temas en Liferay. Explica que los temas permiten cambiar aspectos como las imágenes, el HTML, la posición de elementos y archivos JSP en el portal. Además, recomienda heredar de temas existentes para beneficiarse de actualizaciones y correcciones, y hacer los cambios mediante diferencias. Finalmente, proporciona consejos sobre el uso de CSS, plantillas, variables y servicios para personalizar completamente la apariencia y funcionalidad de Liferay.
Empiezo contando qué es Bootstrap, sus ventajas e inconvenientes, y como empezar a usarlo.
Luego cuento detalladamente las distintas características del framework: el sistema de rejilla, la tipografía, las tablas, los formularios, los botones, las imágenes, los helpers...
Continúo explicando las facilidades que tiene para realizar diseños adaptables.
Sigo enumerando los distintos componentes del framework, y los distintos añadidos que tiene si además utilizas JavaScript.
Para terminar, comento como se puede personalizar, ya sea usando tu propio CSS, modificando el CSS de Bootstrap desde la página destinada a tal efecto, o directamente compilando los ficheros Less del core.
Presentación de la desconferencia de José Román Hernández Martín ( Emezeta blog ) sobre desarrollo y gestión web para la Descon2 de Tenerife LAN Party 2009.
OOCSS - Poniendo OOrden en CSS.
¿Qué es OOCSS? Una forma de optimizar la organización y arquitectura de los estilos CSS. En esta presentación veremos qué problemas trata de resolver, qué principios sigue y cómo aplicarlos.
Esta versión de la presentación incluye las notas del presentador.
Este documento trata sobre técnicas para escribir CSS de forma escalable y mantenible. Se discute que aunque la sintaxis de CSS es simple, escribirlo de forma desordenada puede causar problemas. Se recomienda seguir enfoques como OOCSS, SMACSS o BEM, y utilizar nomenclatura de clases claras y genéricas. También se enfatiza la importancia de separar la estructura del diseño, crear componentes reutilizables y aplicar principios de diseño como encapsulamiento.
Este documento introduce los frameworks CSS. Explica que son herramientas que abstraen tareas repetitivas de desarrollo CSS para aumentar la productividad. Explora ventajas como código más consistente y mantenible, e inconvenientes como curva de aprendizaje. Luego resume algunos frameworks populares como 1KB Grid, 960 Grid System, Blueprint y Bootstrap, destacando sus características como uso de retículas y facilidad de uso.
Este documento presenta una introducción a los frameworks CSS. Explica brevemente qué son los frameworks CSS y sus ventajas e inconvenientes. Luego, ofrece una panorámica de varios frameworks populares como 1Kb CSS Grid, 960 Grid System, Blueprint, Foundation y Bootstrap, describiendo sus características principales. Finalmente, discute algunos factores a considerar a la hora de elegir un framework para un proyecto en particular.
El documento proporciona información sobre Bootstrap, un framework de código abierto para desarrollo de sitios web y aplicaciones responsive. Explica que Bootstrap utiliza HTML, CSS y jQuery para crear sitios responsive basados en una grilla de 12 columnas. También describe algunas de las ventajas de Bootstrap como su facilidad de uso, gran comunidad de soporte y enfoque mobile-first.
La práctica 5 introduce las hojas de estilo en cascada (CSS). Explica que una página web está compuesta de contenido (HTML), presentación (CSS) y comportamiento (JavaScript). Enseña cómo usar la barra de herramientas Web Developer para inspeccionar y modificar páginas. Describe la estructura básica de CSS y los diferentes tipos: en línea, internos, vinculados e importados. Finalmente, pide aplicar estilos específicos para dispositivos como pantallas, impresión y móviles.
El documento proporciona una introducción a los frameworks para el desarrollo web. Explica que un framework es una estructura formada por componentes personalizables e intercambiables que aceleran el desarrollo de aplicaciones y permiten la reutilización de código. También describe algunos frameworks populares como 960 Grid System, Blueprint y Skeleton, y explica conceptos clave como maquetación, diseño visual y posicionamiento en buscadores.
Este documento proporciona una introducción a Bootstrap, el popular framework de código abierto para el desarrollo de sitios web y aplicaciones web. Explica los principios básicos de Bootstrap, incluida su rejilla de 12 columnas y enfoque "mobile-first". También describe varios componentes clave como etiquetas, desplegables, barras de navegación y formularios que se pueden utilizar para crear interfaces adaptables. Finalmente, cubre temas como la personalización de Bootstrap y el uso del preprocesador CSS subyacente Less.
Bootstrap es un framework de código abierto para el desarrollo de sitios y aplicaciones web. Utiliza HTML, CSS y JavaScript para crear diseños responsivos adaptables a diferentes dispositivos. Incluye componentes front-end como grillas, tipografía, formularios y botones preconstruidos.
El documento describe varios conceptos relacionados con los patrones de diseño web. Explica que un patrón de diseño es una solución a un problema de diseño recurrente y que existen varios tipos de patrones como patrones de creación, estructurales y de comportamiento. También cubre técnicas de diseño web como diseño de ancho fijo, líquido y híbrido, así como diseño para móviles.
Stylus es un preprocesador CSS que compila una sintaxis más simple y expresiva a CSS estándar. Ofrece características como nesting, mixins, herencia, importación de archivos y funciones de color para ahorrar tiempo y mejorar la organización y mantenibilidad del código CSS.
Desarrollo de temas de apariencia para Liferay 6.1Julio Camarero
Este documento describe cómo crear y personalizar temas en Liferay. Explica que los temas permiten cambiar aspectos como las imágenes, el HTML, la posición de elementos y archivos JSP en el portal. Además, recomienda heredar de temas existentes para beneficiarse de actualizaciones y correcciones, y hacer los cambios mediante diferencias. Finalmente, proporciona consejos sobre el uso de CSS, plantillas, variables y servicios para personalizar completamente la apariencia y funcionalidad de Liferay.
Empiezo contando qué es Bootstrap, sus ventajas e inconvenientes, y como empezar a usarlo.
Luego cuento detalladamente las distintas características del framework: el sistema de rejilla, la tipografía, las tablas, los formularios, los botones, las imágenes, los helpers...
Continúo explicando las facilidades que tiene para realizar diseños adaptables.
Sigo enumerando los distintos componentes del framework, y los distintos añadidos que tiene si además utilizas JavaScript.
Para terminar, comento como se puede personalizar, ya sea usando tu propio CSS, modificando el CSS de Bootstrap desde la página destinada a tal efecto, o directamente compilando los ficheros Less del core.
Presentación de la desconferencia de José Román Hernández Martín ( Emezeta blog ) sobre desarrollo y gestión web para la Descon2 de Tenerife LAN Party 2009.
Catalogo general tarifas 2024 Vaillant. Amado Salvador Distribuidor Oficial e...AMADO SALVADOR
Descarga el Catálogo General de Tarifas 2024 de Vaillant, líder en tecnología para calefacción, ventilación y energía solar térmica y fotovoltaica. En Amado Salvador, como distribuidor oficial de Vaillant, te ofrecemos una amplia gama de productos de alta calidad y diseño innovador para tus proyectos de climatización y energía.
Descubre nuestra selección de productos Vaillant, incluyendo bombas de calor altamente eficientes, fancoils de última generación, sistemas de ventilación de alto rendimiento y soluciones de energía solar fotovoltaica y térmica para un rendimiento óptimo y sostenible. El catálogo de Vaillant 2024 presenta una variedad de opciones en calderas de condensación que garantizan eficiencia energética y durabilidad.
Con Vaillant, obtienes más que productos de climatización: control avanzado y conectividad para una gestión inteligente del sistema, acumuladores de agua caliente de gran capacidad y sistemas de aire acondicionado para un confort total. Confía en la fiabilidad de Amado Salvador como distribuidor oficial de Vaillant, y en la resistencia de los productos Vaillant, respaldados por años de experiencia e innovación en el sector.
En Amado Salvador, distribuidor oficial de Vaillant en Valencia, no solo proporcionamos productos de calidad, sino también servicios especializados para profesionales, asegurando que tus proyectos cuenten con el mejor soporte técnico y asesoramiento. Descarga nuestro catálogo y descubre por qué Vaillant es la elección preferida para proyectos de climatización y energía en Amado Salvador.
El uso de las TIC en la vida cotidiana.pptxjgvanessa23
En esta presentación, he compartido información sobre las Tecnologías de la Información y la Comunicación (TIC) y su aplicación en diversos ámbitos de la vida cotidiana, como el hogar, la educación y el trabajo.
He explicado qué son las TIC, las diferentes categorías y sus respectivos ejemplos, así como los beneficios y aplicaciones en cada uno de estos ámbitos.
Espero que esta información sea útil para quienes la lean y les ayude a comprender mejor las TIC y su impacto en nuestra vida cotidiana.
La inteligencia artificial sigue evolucionando rápidamente, prometiendo transformar múltiples aspectos de la sociedad mientras plantea importantes cuestiones que requieren una cuidadosa consideración y regulación.
Infografia TCP/IP (Transmission Control Protocol/Internet Protocol)codesiret
Los protocolos son conjuntos de
normas para formatos de mensaje y
procedimientos que permiten a las
máquinas y los programas de aplicación
intercambiar información.
para programadores y desarrolladores de inteligencia artificial y machine learning, como se automatiza una cadena de valor o cadena de valor gracias a la teoría por Manuel Diaz @manuelmakemoney
18. Estructura Hoja de Estilos
FRAMEWORK
Reset Normaliza las inconsistencias
entre navegadores.
Base
Componentes reusables entre
Grid proyectos.
Widgets
Helpers
THEME
Widgets Modulariza, construye tu sitio
a partir de componentes reusables
Pages a nivel de proyecto.
19. e OOCSS
Patrón recomendado.
{
Usa un Reset y un Base.
20. Estructura Hoja de Estilos > Reset y Base
FRAMEWORK
Reset Normalizan estilos entre navegadores,
eliminando inconsistencias y estableciendo
Base una base común.
Grid Sin ellos no podríamos partir de una base
conocida, nuestros estilos no tendrían un
Widgets comportamiento predecible en los diferentes
navegadores.
Helpers
Evitan el código repetitivo (DRY).
Usa una ya existente: 960.gs, formalize.me,
normalize.css, html5boilerplate, YUI... O crea
THEME la tuya propia.
Widgets
Pages
21. Estructura Hoja de Estilos > Reset y Base
FRAMEWORK
Reset Normaliza estilos entre navegadores,
eliminando inconsistencias y estableciendo
Base una base común.
h
Grid Sin ellos no podríamos partir de una base
conocida, nuestros estilos no tendrían un
DEMO
Widgets comportamiento predecible en los diferentes
navegadores.
Helpers
Evitan el código repetitivo (DRY).
Usa una ya existente 960.gs, formalize.me,
normalize.css, html5boilerplate, YUI... O crea
THEME la tuya propia.
Widgets
Pages
23. Estructura Hoja de Estilos > Grid
FRAMEWORK
Reset “Some years ago, I found CSS Framework like Blueprint
to be a waste of time. I didn't want to clutter my HTML
Base markup with non-semantic classes for handling the styling.
Now I still don't think cluttering the HTML with span-6 pull-2
Grid is the best thing that happened to CSS, but I found it much
better than cluttering my CSS with endless overflow:hidden
Widgets and float:left; margin-right:10px declarations.”
http://www.pixelastic.com/blog/201:7-advices-to-start-using-oocss-as-a-coding-practice
Helpers
THEME
Widgets
Pages
24. Estructura Hoja de Estilos > Grid
FRAMEWORK
Reset O repites una y otra vez las reglas
necesarias para crear layouts1 o abstraes esas
Base reglas y las aplicas como clases2. Elige.
1 float:left,margin-right:10px, overflow:hidden...
Grid
2 .grid-6, .grid-10, .push-1...
Widgets
Evitan el código repetitivo (DRY). Abstraen
Helpers inconsistencias entre navegadores.
Usa una ya existente: 960.gs, 978.gs, blueprint,
YUI... O crea la tuya propia.
THEME
Widgets
Pages
25. Estructura Hoja de Estilos > Grid
FRAMEWORK
Reset O repites una y otra vez las reglas
necesarias para crear layouts1 o abstraes esas
Base reglas y las aplicas como clases2. Elige.
h
1 float:left,margin-right:10px, overflow:hidden...
Grid
2 .grid-6, .grid-10, .push-1...
DEMO
Widgets
Evitan el código repetitivo (DRY). Abstraen
Helpers inconsistencias entre navegadores.
Usa una ya existente: 960.gs, 978.gs, blueprint,
YUI... O crea la tuya propia.
THEME
Widgets
Pages
26. e OOCSS
Patrón recomendado.
{
Crea Objetos reusables.
27. Estructura Hoja de Estilos > Widgets > Crea Objetos reusables
FRAMEWORK 1 2 3 4 5 6 7 8
Reset “Build HTML from the component library. New pages
should not generally require additional CSS.”
Base - Nicole Sullivan
Grid Crea una librería de componentes reusables para
el proyecto o incluso independientes del proyecto.
Widgets
Los objetos son un conjunto de clases CSS
Helpers relacionadas que responden a una funcionalidad
determinada. Estos objetos deben ser reusables,
extensibles y anidables.
La clave está en identificar esos objetos y en
THEME saber aprovechar la extensión y la composición.
Widgets Evitan el código repetitivo (DRY). Maximizan la
reusabilidad.
Pages
Itera, refactoriza!
28. Estructura Hoja de Estilos > Widgets > Crea Objetos reusables
FRAMEWORK 1 2 3 4 5 6 7 8
Reset “Build HTML from the component library. New pages
should not generally require additional CSS.”
Base - Nicole Sullivan
h
Grid Crea una librería de componentes reusables para
el proyecto o incluso independientes del proyecto.
DEMO
Widgets
Los objetos son un conjunto de clases CSS
Helpers relacionadas que responden a una funcionalidad
determinada. Estos objetos deben ser reusables,
extensibles y anidables.
La clave está en identificar esos objetos y en
THEME saber aprovechar la extensión y la composición.
Widgets Evitan el código repetitivo (DRY). Maximizan la
reusabilidad.
Pages
Itera, refactoriza!
29. e OOCSS
Patrón recomendado.
{
Simplifica la cascada.
30. Estructura Hoja de Estilos > Widgets > Simplifica la Cascada
FRAMEWORK 1 2 3 4 5 6 7 8
Reset Si la cascada no tiene un comportamiento
predecible tus estilos tampoco lo tendrán, por
Base lo que nunca podrán ser realmente reusables.
Grid Di adiós a los selectores #id, a los estilos en
línea y a las declaraciones !important. De lo
Widgets contrario no conseguirás que tus estilos tengan
un comportamiento predecible.
Helpers
THEME
Widgets
Pages
31. Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > No #id
FRAMEWORK 1 2 3 4 5 6 7 8
Reset 2.1 No uses #id como selector
Base Sólo puede haber uno en la página, impidiendo
la reusabilidad y limitando la modularización
Grid
Singleton, no puedes crear varias instancias,
Widgets no puede haber objetos extendidos o compuestos
en la misma página: #objeto y #objeto.extendido
Helpers
Complican la especificidad y la cascada, tienen
demasiado peso. No podremos crear reglas del
mismo peso cuando combinemos objetos basados
en .clase y en #id.
THEME
Úsalos únicamente en el HTML como hooks de
Widgets JavaScript o para accesibilidad (formularios,
Pages anclas...).
32. Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > No #id
FRAMEWORK 1 2 3 4 5 6 7 8
Reset 2.1 No uses #id como selector
Base Sólo puede haber uno en la página, impidiendo
la reusabilidad y limitando la modularización
h
Grid
Singleton, no puedes crear varias instancias,
DEMO
Widgets no puede haber objetos extendidos o compuestos
en la misma página: #objeto y #objeto.extendido
Helpers
Complican la especificidad y la cascada, tienen
demasiado peso. No podremos crear reglas del
mismo peso cuando combinemos objetos basados
en .clase y en #id.
THEME
Úsalos únicamente en el HTML como hooks de
Widgets JavaScript o para accesibilidad (formularios,
Pages anclas...).
33. Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > Ni estilos en línea ni !important
FRAMEWORK 1 2 3 4 5 6 7 8
Reset 2.2 Ni estilos en línea ni !important
Base Úsalos únicamente para sobreescribir estilos de
una hoja externa fuera de tu control (por ejemplo,
Grid un widget externo de comentarios).
Widgets Si estás usando estilos en línea o el modificador
!important para sobreescribir estilos creados
Helpers por tí es un claro síntoma de que algo va mal, te
has cargado la cascada.
THEME
Widgets
Pages
34. Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > ¡Olvida la cascada!
FRAMEWORK 1 2 3 4 5 6 7 8
Reset 2.3 ¡Olvida la cascada!
Base - Olvídate de tener que calcular la especificidad de
los selectores.
Grid
- No dependas del orden del código fuente
Widgets (cascada).
- Usa valores absolutos para propiedades que se
Helpers heredan (evita tight coupling con el HTML).
Los estilos se deben heredar de una manera
simple y completamente predecible. De esta
manera tus objetos se comportarán de una forma
THEME predecible, elegirás tus selectores con total
seguridad, de una forma sencilla y sin sorpresas
Widgets desagradables, ya que no habrá dependencias ni
influencias desconocidas (loose coupling).
Pages
35. Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > ¡Olvida la cascada!
FRAMEWORK 1 2 3 4 5 6 7 8
Reset 2.3 ¡Olvida la cascada!
Base - Olvídate de tener que calcular la especificidad de
los selectores.
h
Grid
- No dependas del orden del código fuente
(cascada).
DEMO
Widgets
- Usa valores absolutos para propiedades que se
Helpers heredan (evita tight coupling con el HTML).
Los estilos se deben heredar de una manera
simple y completamente predecible. De esta
manera tus objetos se comportarán de una forma
THEME predecible, elegirás tus selectores con total
seguridad, de una forma sencilla y sin sorpresas
Widgets desagradables, ya que no habrá dependencias ni
influencias desconocidas (loose coupling).
Pages
36. e OOCSS
Patrón recomendado.
{
Usa clases, no elementos.
37. Estructura Hoja de Estilos > Widgets > Usa clases, no elementos
FRAMEWORK 1 2 3 4 5 6 7 8
Reset Usa clases para tus objetos CSS, evita usar
elementos HTML en los selectores CSS.
Base
3.1 Nombra los elementos asignándoles una
Grid clase. Los estilos serán más reusables, ya
que no dependerán del markup (.title en vez
Widgets de h1, h2...).
Helpers 3.2 No especifiques el elemento HTML al que es
aplicado una clase CSS (sí: .miclase, no:
div.miclase).
Especificar el elemento al que es aplicado una
THEME clase es redundante, innecesario y crea más
dependencia entre la estructura HTML y el
Widgets estilo CSS, obligándonos a modificar el CSS
cada vez que modifiquemos la estructura
Pages HTML (por ejemplo, al cambiar de ol a ul).
38. Estructura Hoja de Estilos > Widgets > Usa clases, no elementos
FRAMEWORK 1 2 3 4 5 6 7 8
Reset Usa clases para tus objetos CSS, evita usar
elementos HTML en los selectores CSS.
Base
3.1 Nombra los elementos asignándoles una
h
Grid clase. Los estilos serán más reusables, ya
que no dependerán del markup (.title en vez
DEMO
Widgets de h1, h2...).
Helpers 3.2 No especifiques el elemento HTML al que es
aplicado una clase CSS (sí: .miclase, no:
div.miclase).
Especificar el elemento al que es aplicado una
THEME clase es redundante, innecesario y crea más
dependencia entre la estructura HTML y el
Widgets estilo CSS, obligándonos a modificar el CSS
cada vez que modifiquemos la estructura
Pages HTML (por ejemplo, al cambiar de ol a ul).
39. e OOCSS
Patrón recomendado.
{
Minimiza los selectores.
40. Estructura Hoja de Estilos > Widgets > Minimiza los selectores
FRAMEWORK 1 2 3 4 5 6 7 8
Reset 4.1 Legibilidad: No definas selectores
innecesariamente cualificados como .usuarios
Base table thead tr th a, con .usuarios thead a es
suficiente.
Grid
Evita sobre detallar cada nivel de la
Widgets estructura HTML. En la mayoría de ocasiones
basta con indicar el primer y último elemento.
Helpers No definas elementos redundantes como
tr th o ul li, bastaría con indicar th o li ya que
no pueden estar contenidos por un padre
diferente.
THEME 4.2 Rendimiento: El selector descendiente
” ” (espacio) es el que requiere un proceso
Widgets más intensivo por parte del navegador,
el hijo ”>” algo menos. Trata de limitar su
Pages
uso, por ejemplo, un máximo de 3 selectores
simples.
41. Estructura Hoja de Estilos > Widgets > Minimiza los selectores
FRAMEWORK 1 2 3 4 5 6 7 8
Reset 4.1 Legibilidad: No definas selectores
innecesariamente cualificados como .usuarios
Base table thead tr th a, con .usuarios thead a es
suficiente.
h
Grid
Evita sobre detallar cada nivel de la
DEMO
Widgets estructura HTML. En la mayoría de ocasiones
basta con indicar el primer y último elemento.
Helpers No definas elementos redundantes como
tr th o ul li, bastaría con indicar th o li ya que
no pueden estar contenidos por un padre
diferente.
THEME 4.2 Rendimiento: El selector descendiente
” ” (espacio) es el que requiere un proceso
Widgets más intensivo por parte del navegador,
el hijo ”>” algo menos. Trata de limitar su
Pages
uso, por ejemplo, un máximo de 3 selectores
simples.
42. e OOCSS
Patrón recomendado.
{
No dependas del contexto.
43. Estructura Hoja de Estilos > Widgets > No dependas del contexto
FRAMEWORK 1 2 3 4 5 6 7 8
Reset “Separate container and content: Break the dependency
between the container module and the content objects it
Base contains.”
- Nicole Sullivan
Grid
Los estilos de los objetos deben ser
Widgets independientes del lugar que ocupen en la página:
footer, sidebar, content... Si dependen de la
Helpers estructura de la página no serán reusables fuera
de ese contexto.
No: .sidebar .last-comments {}
Sí: .last-comments {}.
THEME
Ésto permitirá mostrar el widget en cualquier
Widgets página y en cualquier parte de la misma. Incluso
en otro proyecto, conociendo en todo momento
Pages sus dependencias de estilo y cómo le afectará el
nuevo contexto (herencia y namespaces).
44. Estructura Hoja de Estilos > Widgets > No dependas del contexto
FRAMEWORK 1 2 3 4 5 6 7 8
Reset “Separate container and content: Break the dependency
between the container module and the content objects it
Base contains.”
- Nicole Sullivan
h
Grid
Los estilos de los objetos deben ser
DEMO
Widgets independientes del lugar que ocupen en la página:
footer, sidebar, content... Si dependen de la
Helpers estructura de la página no serán reusables fuera
de ese contexto.
No: .sidebar .last-comments {}
Sí: .last-comments {}.
THEME
Ésto permitirá mostrar el widget en cualquier
Widgets página y en cualquier parte de la misma. Incluso
en otro proyecto, conociendo en todo momento
Pages sus dependencias de estilo y cómo le afectará el
nuevo contexto (herencia y namespaces).
45. e OOCSS
Patrón recomendado.
{
No crees dependencias
innecesarias entre objetos.
46. Estructura Hoja de Estilos > Widgets > No crees dependencias innecesarias entre objetos
FRAMEWORK 1 2 3 4 5 6 7 8
Reset No agrupes selectores de distintos objetos,
creando dependencias innecesarias entre ellos
Base (Loose Coupling, Component Singularity).
Grid No uses el operador de agrupación ”,” para
combinar selectores de diferentes objetos. Úsalo
Widgets únicamente para agrupar selectores dentro de
un mismo objeto.
Helpers
Si estás creando bien tus objetos, y aplicando
bien la extensión y la composición te darás
cuenta que apenas necesitas usar el operador
de agrupación ”,”.
THEME
Widgets
Pages
47. Estructura Hoja de Estilos > Widgets > No crees dependencias innecesarias entre objetos
FRAMEWORK 1 2 3 4 5 6 7 8
Reset No agrupes selectores de distintos objetos,
creando dependencias innecesarias entre ellos
Base (Loose Coupling, Component Singularity).
h
Grid No uses el operador de agrupación ”,” para
combinar selectores de diferentes objetos. Úsalo
DEMO
Widgets únicamente para agrupar selectores dentro de
un mismo objeto.
Helpers
Si estás creando bien tus objetos, y aplicando
bien la extensión y la composición te darás
cuenta que apenas necesitas usar el operador
de agrupación ”,”.
THEME
Widgets
Pages
48. e OOCSS
Patrón recomendado.
{
Extiende los objetos.
49. Estructura Hoja de Estilos > Widgets > Extiende los objetos
FRAMEWORK 1 2 3 4 5 6 7 8
Reset Extiende los objetos a través de múltiples clases.
Base .objeto{}, es un objeto padre
.objeto.hijo{}, es una extensión de .objeto{}
Grid
Similar a cómo funciona la extensión en OOP.
Widgets Las clases hijas heredan las propiedades de la
clase padre, estas propiedades podrán ser
Helpers modificadas o ampliadas por las clases hijas.
Las clases hijas, al contrario que en OOP, no
requieren ser declaradas después de la clase
padre, pero se recomienda hacerlo para una
THEME mayor legibilidad.
Widgets
Pages
50. Estructura Hoja de Estilos > Widgets > Extiende los objetos
FRAMEWORK 1 2 3 4 5 6 7 8
Reset Extiende los objetos a través de múltiples clases.
Base .objeto{}, es un objeto padre
.objeto.hijo{}, es una extensión de .objeto{}
h
Grid
Similar a cómo funciona la extensión en OOP.
DEMO
Widgets Las clases hijas heredan las propiedades de la
clase padre, estas propiedades podrán ser
Helpers modificadas o ampliadas por las clases hijas.
Las clases hijas, al contrario que en OOP, no
requieren ser declaradas después de la clase
padre, pero se recomienda hacerlo para una
THEME mayor legibilidad.
Widgets
Pages
51. e OOCSS
Patrón recomendado.
{
Crea objetos compuestos.
52. Estructura Hoja de Estilos > Widgets > Crea objetos compuestos
FRAMEWORK 1 2 3 4 5 6 7 8
Reset “Favor 'object composition' over 'class inheritance'.”
- http://en.wikipedia.org/wiki/Design_Patterns
Base
Algunos componentes de la página pueden
Grid estar compuestos de varios objetos
independientes.
Widgets
En este caso no aplicaremos la extensión de un
Helpers objeto base, sino la composición o anidamiento
de objetos.
Al utilizar este patrón nos encontramos con
uno de los mayores problemas de CSS, la falta
THEME de control total sobre la herencia de estilos y la
cascada.
Widgets
Pages
53. Estructura Hoja de Estilos > Widgets > Crea objetos compuestos
FRAMEWORK 1 2 3 4 5 6 7 8
Reset Los problemas de anidación surgen por dos
motivos: propiedades CSS heredables, nombres
Base de clases compartidas (sin namespace).
Grid 8.1 Crea reglas específicas para cada caso de
anidación, de forma bidireccional y con el
Widgets mismo nivel de especifidad, así no
dependerás del orden en el código fuente.
Helpers En ellas especificaremos los estilos a
neutralizar o sobreescribir del módulo padre.
8.2 Todos los nombres de clases están en el
namespace global de CSS. Sé consistente
THEME con el formato de namespaces que uses, sé
consciente de sus ventajas e inconvenientes.
Widgets
Pages
54. Estructura Hoja de Estilos > Widgets > Crea objetos compuestos
FRAMEWORK 1 2 3 4 5 6 7 8
Reset Los problemas de anidación surgen por dos
motivos: propiedades CSS heredables, nombres
Base de clases compartidas (sin namespace).
h
Grid 8.1 Crea reglas específicas para cada caso de
anidación, de forma bidireccional y con el
DEMO
Widgets mismo nivel de especifidad, así no
dependerás del orden en el código fuente.
Helpers En ellas especificaremos los estilos a
neutralizar o sobreescribir del módulo padre.
8.2 Todos los nombres de clases están en el
namespace global de CSS. Sé consistente
THEME con el formato de namespaces que uses, sé
consciente de sus ventajas e inconvenientes.
Widgets
Pages
55. Estructura Hoja de Estilos > Pages
FRAMEWORK
Reset La sección Pages es opcional, sus objetos podrían
formar parte de la sección Widgets. Dependerá
Base de la complejidad del proyecto.
Grid Dos funciones:
Widgets 1 Agrupar los objetos de páginas/secciones con
estilos completamente independientes, no
Helpers reusables en otro contexto. Facilitamos su
localización y posible separación a otra hoja.
2 Definir las anidaciones necesarias de objetos
cuyo estilo depende de la página. No deja de
THEME ser un caso de composición.
Widgets
Pages
56. Estructura Hoja de Estilos > Helpers
FRAMEWORK
Reset Los Helpers son pequeñas clases auxiliares
reusables entre proyectos.
Base
Evitan la repitición del código (DRY).
Grid
Ejemplos: .clear, .clearfix, .hidden...
Widgets
Helpers
THEME
Widgets
Pages