Share
Suena como un oxímoron, o al menos una imposibilidad, ¿no es así? ¿Cómo puede un lenguaje estático que se parece más al marcado que a la programación estar orientado a objetos? En este tutorial, te presentaré la idea del CSS orientado a objetos, te mostraré cómo funciona y trataré de convencerte de que también deberías usarlo.!
CSS orientado a objetos, en su núcleo, es simplemente escribir más limpio, SECOer CSS. No es un lenguaje diferente: sigue siendo el mismo CSS antiguo que todos conocemos y amamos. Es solo un cambio de paradigma. Realmente, el CSS orientado a objetos es unos pocos patrones simples y mejores prácticas.
Entonces, ¿por qué llamarlo orientado a objetos? Bueno, según Wikipedia.,
La programación orientada a objetos (OOP) es un paradigma de programación que utiliza "objetos" (estructuras de datos que consisten en campos y métodos de datos) y sus interacciones para diseñar aplicaciones y programas informáticos..
Si tuviéramos que volver a escribir esa definición para CSS orientado a objetos, podría decir algo como esto:
El CSS orientado a objetos es un paradigma de codificación que estiliza "objetos" o "módulos", fragmentos de HTML que pueden ser definidos y que definen una sección de una página web, con estilos robustos y reutilizables..
Básicamente, esto significa que tienes un "objeto" estándar (una estructura HTML). Luego, tiene clases de CSS que aplica a los objetos, que definen el diseño y el flujo del objeto..
¿Confuso? Veamos un poco de teoría..
Hay dos principios principales [en CSS orientado a objetos]: el primero es separar la estructura del aspecto y el segundo es separar el contenedor del contenido.
Cito a Nicole Sullivan, cuya idea original es el CSS orientado a objetos. Entonces, ¿cómo se cumplen estos dos principios??
Separar la estructura de la piel significa que su estilo de diseño y su estilo de diseño están separados. Una forma muy práctica de hacer esto es usar un sistema de cuadrícula; Hay muchas opciones, o puedes crear las tuyas. Si no está utilizando un sistema de cuadrícula, probablemente solo definirá la estructura en el objeto principal de su página; eso es lo que haremos hoy.
Separar el contenedor del contenido significa que cualquier objeto (el contenedor) debe poder adaptarse para aceptar cualquier contenido; por ejemplo, no debería necesitar para tener un h3 en la parte superior, seguido de una lista desordenada para que se vea bien. Esto permite flexibilidad y reutilización, que es de suma importancia..
Hay algunas buenas razones por las que querría escribir su CSS de forma orientada a objetos. Uno de los mayores beneficios, y ya lo mencionamos, es que su CSS será más reutilizable. Pero tus hojas de estilo también deberían ser mucho más pequeñas. El CSS orientado a objetos debería facilitar el cambio del diseño de un sitio.
Escribir tu estilo de esta manera también te puede dar tranquilidad: será mucho más fácil cambiar partes de tu sitio sin romper cosas. CSS orientado a objetos también le permite cambiar su sitio constantemente.
Bueno, si has llegado hasta aquí, estás interesado en cómo exactamente escribes CSS con una mentalidad orientada a objetos. Aquí vamos!
El primer paso es realmente preparar el CSS: tienes que determinar tu objeto HTML. En general, su objeto tendrá un encabezado, un cuerpo y un pie de página, aunque el encabezado y el pie de página son opcionales. Aquí hay un objeto muy básico..
Antes de que grites "¡DIVITIS!" date cuenta de que esto no es tan malo como parece; considera esto:
Usando HTML5, ahora tenemos un objeto con significado semántico y sin características de sopa. En realidad, este es el objeto que usaremos hoy..
Si vamos a escribir algo de CSS, necesitaremos algo al estilo, así que vamos a crear una plantilla muy básica: una página de inicio de blog y una página de publicación única. Usaremos algunos elementos HTML5 y algunos estilos CSS3 hoy!
Objeto orientado a CSS Objeto orientado a CSS
(en realidad, solo un montón de mejores prácticas y patrones, no un nuevo lenguaje)
10 de septiembre de 2009 Echa un vistazo a WorkAwesome!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar tempor ut id ido. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.
7 de septiembre de 2009 El post de introducción
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar tempor ut id ido. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.
5 de septiembre de 2009 Bienvenido
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar tempor ut id ido. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.
Sé que es un poco largo, así que aquí hay un diagrama de nuestra estructura básica:
¿Parecer familiar? Ese es nuestro objeto, con un lado añadido para nuestra barra lateral. Veremos la página de publicación única un poco más tarde, pero ahora vamos a saltar a algo de CSS!
Notarás que estamos enlazando a tres hojas de estilo: reset.css, text.css y styles.css. Reset.css es el reinicio de Eric Meyer. Text.css es importante: el segundo paso de CSS orientado a objetos es diseñar algunos elementos básicos clave; Por lo general, estos son elementos de texto, como encabezados y listas. El estilo de estos objetos es importante porque determina el aspecto y la apariencia del sitio; estos elementos, en su mayor parte, no recibirán ningún estilo directo adicional.
Esto es lo que tenemos en nuestro text.css:
body font: 13px / 1.6 Helvetica, Arial, FreeSans, sans-serif; h1, h2, h3, h4, h5, h6 color: # 333; h1 font-size: 50px; text-shadow: 1px 1px 0 #fff; font-family: arial black, arial h2 font-size: 23px; h3 font-size: 21px; h4 font-size: 19px; h5 font-size: 17px; h6 font-size: 15px; p, h1, h2, h3, h4, h5, h6, ul margen inferior: 20 px; artículo, aparte, diálogo, figura, pie de página, encabezado, grupo, menú, navegación, sección pantalla: bloque;
(Felicitaciones al sistema de cuadrícula 960, cuyo archivo text.css está descompuesto).
Ahora empezaremos a construir styles.css; aquí es donde comienza la magia orientada a objetos. Sin embargo, primero solo incluiré algunos estilos de nivel superior, solo para establecer un fondo del cuerpo y algunos estilos de enlace y lista..
body background: url (… /img/grad.jpg) repeat-x # c0c0c0; / * Nota: Toda la imagen estará en el código fuente descargable. * / a text-decoration: none; color: # 474747; relleno: 1px; a: hover background: # db5500; color: #fff; .seleccionado borde inferior: 1px sólido # db5500; li padding-left: 15px; fondo: url (… /img/bullet.png) 0 5.9px no-repetir;
Nuestra primera orden de negocio es definir la estructura de la página:
#contenedor margen: 40px auto; ancho: 960px; borde: 1px sólido #ccc; fondo: #ececec; #contenedor> encabezado, #contenedor> pie de página relleno: 80px 80px 80px; ancho: 800px; desbordamiento: oculto; borde: 1px sólido #ccc; ancho del borde: 1px 0 1px 0; #container> header background: url (… /img/header.jpg) repeat-x # d9d9d7; #container> header li, #container> footer li float: left; relleno: 0 5px 0 0; fondo: ninguno; #container> section background: #fdfdfd; relleno: 0 40px 40px 80px; flotador izquierdo; ancho: 493px; borde derecho: 1px sólido #ccc; #container> aparte padding-top: 20px; flotador izquierdo; ancho: 346px; #contenedor> pie de página relleno: 40px 80px 80px; fondo: #fcfcfc; #container> footer li: after content: "|" #container> footer li: last-child: after content: ""
Observe que estamos diseñando nuestro objeto contenedor iniciando todos nuestros selectores con #container. Sin embargo, ese es un caso especial: por lo general, querrá usar clases porque son reutilizables libremente..
Podemos usar selectores de clase para nuestro estilo de post:
.post desbordamiento: visible; margen superior: 40px; .post> header margin: 0 0 20px 0; posición: relativa; .post .date padding: 2px 4px; fondo: # 474747; color: #ececec; font-weight: negrita; transformar: rotar (270deg); -moz-transform: rotate (270deg); -webkit-transform: rotate (270deg); posición: absoluta; superior: 60px; izquierda: -105.5px; .post img float: left; margen derecho: 10px; .post.ext img float: derecha; margen: 0 0 0 10px; .post footer desbordamiento: oculto; .post footer li float: left; fondo: ninguno;
Veamos qué hace este CSS orientado a objetos. En primer lugar, no hemos limitado la clase a un elemento específico; Podríamos agregarlo a cualquier cosa. Esto nos da la mayor flexibilidad posible. Entonces, note que no hemos establecido ninguna altura o ancho; eso es parte de separar la estructura de la piel; Ya escribimos el estilo de sturcture, por lo que este objeto llenará cualquier espacio que la estructura le dé.
Además, hemos diseñado todos los elementos involucrados de manera independiente: los elementos principales no requieren que ciertos niños se vean bien; Aunque tenemos elementos infantiles estilizados, nada se romperá si no están allí. Y los elementos hijos no son, en su mayor parte, dependientes de sus padres; No he diseñado el h2 en un objeto de publicación, porque debería ser coherente en todo el sitio; Ya nos encargamos de eso en text.css.
Hay otro bit importante, la parte más parecida a la programación orientada a objetos: clases extendidas. Probablemente viste que tenemos un estilo para ambos .post img y .post.ext img. Estoy seguro de que sabes lo que harán, pero aquí está la prueba:
Simplemente agregando otra clase a su objeto, puede cambiar partes menores de la apariencia; Debería mencionar que Nicole Sullivan habría creado una clase llamada .postExt, y luego aplicó ambas al objeto; Prefiero hacerlo de esta manera, porque me permite usar el mismo nombre de clase ("ext") para todas mis extensiones, y creo que hace que el HTML se vea más limpio. Solo debes recordar no poner un espacio en el selector; ".post .ext" buscará un elemento en la clase ext dentro Un elemento en la clase de correos. Sin el espacio, buscará un elemento en ambas clases..
Ahora que tenemos el área de contenido principal establecida, veamos la barra lateral. Tenemos dos objetos en la barra lateral: una lista de archivos y una lista de comentarios recientes. Para comenzar, crearemos una clase .side-box para ellos:
.caja lateral relleno: 20px 80px 20px 40px; .side-box: not (: last-child) border-bottom: 1px solid #ccc; .side-box> header h3 margin-bottom: 0; .side-box> header p text-transform: uppercase; estilo de letra: cursiva; tamaño de letra: 90%;
Una vez más, debe tener en cuenta que estamos teniendo cuidado de seguir las dos reglas: hemos separado la estructura de la piel al no establecer la altura o el ancho; el objeto fluye para llenar cualquier espacio que necesite tomar. Y hemos separado el contenedor del contenido al no hacer que los elementos secundarios sean necesarios para un estilo adecuado. Sí, he ajustado el estilo h3, lo que hace que ese h3 en particular parezca dependiente de la caja lateral de la clase; en la mayoría de los casos, eso es indeseable, pero en este caso, no he hecho demasiado.
Pero vamos a crear una extensión para esto; sin embargo, dado que queremos hacer un gran ajuste visual, no ampliaremos la clase de caja lateral directamente; crearemos una nueva clase.
.pop-out> section> * display: block; fondo: #fefefe; borde: 1px sólido # 474747; relleno: 20px; posición: relativa; ancho: 120%; izquierda: 20px;
Entonces que hace esto? Observe el selector: estamos apuntando a cada elemento directamente dentro del cuerpo de nuestro objeto; al estilizar un objeto, siempre aplica la clase al objeto en sí. Este CSS "abrirá" el contenido a la derecha.
"¡Eh, tú pones un ancho! ¿Qué hay de separar la estructura de la piel?" Establecí un ancho porque estamos apuntando a los elementos dentro del cuerpo de nuestro objeto; ya que el objeto tiene relleno, ese elemento interno es un poco estrecho por sí mismo. Eso suena como una excusa para romper la regla, pero no creo que realmente haya roto la regla: establezco el ancho como un porcentaje, que aún depende del estilo de la estructura más arriba en la cascada.
Esto es lo que parece.
Acabo de decirte que siempre debes aplicar clases a los objetos de nivel superior y usar los selectores de niños para moldear los elementos internos. Pero parte del CSS orientado a objetos es poder mezclar y combinar estilos fácilmente. Es muy posible que desee utilizar un encabezado similar en dos objetos que no están relacionados de ninguna manera. Es ideal tener una colección de clases de encabezado y pie de página que apliques directamente al encabezado o pie de página de un objeto. De esta manera, no está agregando código similar a varias clases no relacionadas, sino que lo abstrae y lo aplica en el lugar relevante. Vamos a crear un encabezado abstraído.
Notará que le dimos al encabezado de nuestros comentarios recientes una clase llamada 'post-it'. Vamos a crear esa clase ahora.
.post-it border: 1px solid # db5500; relleno: 10px; estilo de letra: cursiva; posición: relativa; fondo: # f2965c; color: # 333; transformar: rotar (356deg); -moz-transform: rotate (356deg); -webkit-transform: rotate (356deg); índice z: 10; superior: 10px; cuadro de sombra: 1px 1px 0px # 333; -moz-box-shadow: 1px 1px 0px # 333; -webkit-box-shadow: 1px 1px 0px # 333;
Una mala apariencia de una nota post-it!
Es importante enfatizar que aunque planeamos usar esto para un encabezado, no lo hemos especificado en el selector. Si esto se asemeja a un aspecto de diseño común de nuestro sitio, podemos terminar queriendo este estilo para otra cosa; por ejemplo, podríamos ampliarlo con clases que ajusten el color y la rotación, y usarlos en una pared o en un tablero bulliten o algo similar..
No bloquee sus selectores; nunca se sabe cuándo querrás esos estilos!
A menudo querrás llevarlo más allá de las clases de encabezado y pie de página; una biblioteca de componentes es una gran parte de CSS orientado a objetos; una regla básica podría ser esta: siempre que desee aplicar el mismo estilo en varios lugares no relacionados, resumen. Por supuesto, después de codificar algo en un objeto, podría encontrar que sería más útil si pudiera usarlo en otro lugar; no tengas miedo de refactorizar Siempre es para su beneficio.
Verá estos componentes en el encabezado de la página y en el cuadro de comentarios recientes.
.meta font-size: 75%; estilo de letra: cursiva; .subtitle text-transform: mayúsculas; tamaño de letra: 90%; font-weight: negrita; espacio entre letras: 1px; text-shadow: 1px 1px 0 #fff;
Bueno, hemos terminado con nuestra página de índice; veamos un poco más orientado a objetos en una sola página de publicación. Simplemente copie la página de índice, cambie el nombre a 'post.htm' y cambie el encabezado de la página y la sección de este código.
Objeto orientado a CSS
(en realidad, solo un montón de mejores prácticas y patrones, no un nuevo lenguaje)
10 de septiembre de 2009 Echa un vistazo a WorkAwesome!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar tempor ut id ido. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar tempor ut id ido. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar tempor ut id ido. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar tempor ut id ido. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.
Comentarios
Primer comentarista
Septiembre 10
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
Responder-comentarista
12 de septiembre
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
Segundo comentarista
Septiembre 10
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
El autor
11 de septiembre
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
Cuarto comentarista
12 de septiembre
imperdiet Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi
Ahora podemos ver donde entra algo de reutilización; Podemos usar la clase de post para la publicación de blog aquí; esa es la misma clase de correos que usamos para la página de inicio; porque no especificamos la estructura, pero dejamos que el objeto se expanda para tomar lo que le demos, puede manejar toda la publicación.
Ahora volvamos nuestra atención a los comentarios en esta página; Los comentarios son un gran lugar para usar CSS orientado a objetos. Empezaremos añadiendo esto:
.comment border: 1px solid #ccc; radio del borde: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; relleno: 10px; margen: 0 0 10px 0; .comment> header> p font-weight: bold; pantalla: en línea; margen: 0 10px 20px 0;
Esto solo nos da algunos comentarios psuedo-atractivos; Pero podemos hacer más. Nuestro HTML tiene clases para respuestas y comentarios de autores..
.reply.comment margin-left: 80px; .author.comment color: #ececec; fondo: # 474747;
Asegúrese de no tener un espacio entre los dos nombres de clase. Esto es un poco diferente de lo que hicimos anteriormente: en lugar de cambiar el estilo de la clase de comentarios, en realidad lo estamos extendiendo (así que tal vez estas son las clases extendidas reales).
Y los comentarios terminados ...
Y mientras estamos aquí, agreguemos un formulario de comentarios a nuestra biblioteca de componentes.
.comments-form p padding: 5px; radio del borde: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; .comments-form p: hover background: #ececec; etiqueta .com-form-form display: inline-block; ancho: 70px; alineación vertical: superior; etiqueta .com-form-form: después de contenido: ":"; entrada de formulario de .comments [tipo = texto], botón de formulario de .comments, área de texto de .comments ancho: 200px; borde: 1px sólido #ccc; radio del borde: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; relleno: 2px; botón .com-form [type = submit] margin-left: 70px;
Esto nos da una buena forma de esquina redondeada con un suave efecto de desplazamiento..
Estoy un poco desgarrado aquí; un concepto fundamental de CSS orientado a objetos es la capacidad de agregar una clase a diferentes elementos; Pero ¿qué pasa con este caso? Esta clase sería básicamente inútil en cualquier cosa menos en una forma; ¿Debemos cambiar los selectores a form.comments-form como un tipo de seguridad? Qué piensas?
Bueno, eso realmente cubre las ideas de CSS orientado a objetos..
No utilicé el ejemplo de mensaje estándar, pero es realmente una excelente manera de ingresar a CSS orientado a objetos. Intente crear una clase de mensaje que pueda aplicar a diferentes elementos, como un párrafo, un elemento de lista o un objeto completo. Luego, amplíelo con clases de error, advertencia e información. Vea lo flexible y reutilizable que puede hacerlo..
No creo que la respuesta a esta pregunta sea un simple "sí" o "no"; probablemente sea porque el CSS orientado a objetos no es un lenguaje, sino una colección de patrones y mejores prácticas. Es posible que no siempre desee aplicar la idea del objeto HTML estándar, pero la mayoría de los principios de CSS son siempre válidos. Si lo piensas bien, verás que realmente se trata de dónde quieres optimizar: puedes codificar tu HTML de forma minimalista, con algunos identificadores para manejar, y ser capaz de diseñarlo fácilmente; pero el CSS no será reutilizable, y el sitio podría fallar más tarde cuando cambies las cosas. O puede escribir un poco más de HTML y optimizar el CSS con los principios que hemos visto en este tutorial..
Estoy dispuesto a expandir un poco mi HTML para poder escribir CSS que sea reutilizable, flexible y SECO. Cual es tu opinion?
Accentsconagua