Share
Detesto mirar el código o el marcado que he escrito en el pasado, lo cual no entiendo de inmediato. Seguramente no soy diferente a usted en que quiero poder regresar años más tarde, recoger el código y entender exactamente lo que está sucediendo. No quiero analizar los conceptos más simples, dónde se ubican los corchetes, o incluso cómo se sangra el marcado. He creado hábitos para ayudarme con un rápido desarrollo, que han mantenido mi cordura. algo intacto. Sin embargo, seré honesto, nunca he pensado mucho en cómo escribo y organizo mi CSS hasta hace poco, y eso es lo que estoy compartiendo hoy..
Hay muchas formas de hacer lo que estoy sugiriendo con CSS. Déjame ser el primero en decir, no uses nada de lo que escribo hoy si tu nivel de comodidad no es alto con mis conceptos. En su lugar, piense en los conceptos y mejore las soluciones sobre las que estoy escribiendo. Comparte tus propios puntos de vista. No discutiré contigo si crees que hay una mejor manera de organizar las hojas de estilo, ya que al final no hay una manera correcta o incorrecta. Sin embargo, creo que cuanta más estructura agregue, mejor se encontrará al final cuando trabaje con CSS.
"¿Qué tan fácil es para nosotros, como desarrolladores, encontrar, comprender, reparar o agregar rápidamente a una base de código dada? Cuanto más fácil sea esa tarea, mejor será la facilidad de uso interno".
Hay un par de conceptos que quiero cubrir ahora en general para que los jugos cerebrales funcionen. Primero, hay una concentración en la usabilidad con el desarrollo web. Queremos que los usuarios de nuestros sitios web encuentren cosas más rápido, naveguen de forma más natural y, en general, comprendan intrínsecamente los conceptos de nuestras aplicaciones. Ese es un uso muy digno de tiempo y energía. Lo que a veces se olvida es la usabilidad interna en toda la planificación y las discusiones de nuestros proyectos. ¿Qué tan fácil es para nosotros, como desarrolladores, encontrar, comprender, reparar o agregar rápidamente a una base de código dada? Cuanto más fácil sea esa tarea, mejor será la usabilidad interna. En mi opinión, ese concepto es tan digno de nuestro tiempo y pensamiento como la facilidad de uso del extremo frontal..
En segundo lugar, recuerda que hay una C en CSS. Es la parte en cascada. El método que utilizo puede ir en contra de algunos pensamientos convencionales, pero cuando retrocedes en un rincón por usar solo ciertos aspectos de CSS, pierdes el poder. Cuando estoy planificando un proyecto grande, pienso en los selectores de id como "explicar la entidad", los selectores de clase como "describe la entidad" y los atributos de estilo como "anular lo que acabo de decir". Conecto en cascada las propiedades para disminuir el código y le doy un pequeño método a la locura. Nuevamente, no hay formas correctas o incorrectas, pero cuando no tienes un plan, te estás preparando para un montón de trabajo extra, sin mencionar los gastos generales..
Finalmente, recuerde que siempre hay concesiones en el desarrollo. Las formas más elegantes de hacer las cosas no siempre son las más eficientes..
A veces, las formas más eficientes de hacer las cosas le cuestan en el futuro cuando tiene que elegir el código de respaldo para soporte.
Nadie puede tomar estas decisiones por usted, pero debe considerar las compensaciones mientras escribe. A veces hay que morder la bala solo un poco, tal vez para agregar una solicitud HTTP adicional para que el resultado final sea utilizable internamente. Otras veces, debe agregar un buen comentario para recordarse la elección que hizo y seguir adelante..
Lo más probable es que esté utilizando un marco para manejar su CSS o que agregue sus estilos de una manera a la que se haya acostumbrado, pero sin mucha estructura. Ambos tienen ventajas y desventajas. Veamos primero algunos marcos de CSS, desde la boca del caballo:
Hay muchos más, y al igual que los marcos para el idioma de su servidor, cada uno tiene sus ventajas entre sí, y cada uno tiene sus inconvenientes. No estoy aquí para alejarte de un marco, ya que los he usado en el pasado y creo en los conceptos. Creo que cuando estás trabajando en un equipo grande, no hay mejor opción ya que estandariza tus estilos y aprende las lecciones. voz del desarrollador y diseñador individual. Dicho esto, creo que hay algunos inconvenientes en el uso de un marco CSS, ya que se suma a la sobrecarga en particular con los estilos que no está utilizando, y la curva de aprendizaje es bastante alta. Esto puede ser un poco frustrante, particularmente con proyectos que tienen horarios estrictos. Dicho esto, la curva de aprendizaje es solo eso, una curva, y con el tiempo dominarás el proyecto que consideres mejor. La ventaja de usar un marco es que ahora ha mejorado su capacidad de uso interna, ya que está usando un paradigma de método establecido, aunque ese método es algo que probablemente está fuera de su control..
La otra solución es lo que yo llamo el "Salvaje Oeste" donde todo vale. Seré honesto y diré que hay muchas veces que simplemente empujé algo por la puerta sin pensar mucho en el futuro, o en el caso de un proyecto muy pequeño donde el CSS no es muy importante. La curva de aprendizaje aquí no es tan mala, porque estás escribiendo tu CSS a medida que avanzas. Tienes control completo sobre el destino de tu estilo. Muy bien hasta ahora! El problema es la usabilidad interna. Regrese a ese proyecto después de que ya no esté fresco en su mente, y habrá algunos problemas. "¿Por qué diablos escribí esto así?" O "No tengo idea de lo que quise decir con este comentario" o "¿Por qué esa entrada no cambia los estilos?" O "¿qué significa este gran control de amigos"? hoja de estilo ya no es fresco en tu mente.
Si pudiera poner la solución del marco en una escala móvil con la solución del salvaje oeste en el otro extremo, creo que preferiría algo justo en el medio. Si bien una cama es demasiado dura, y la otra es demasiado blanda, quiero encontrar la cama adecuada. Eso es lo que yo llamo la solución híbrida. Comparte rasgos tanto con el salvaje oeste como con los marcos. Por un lado, tengo control sobre mis estilos, y con eso la curva de aprendizaje es bastante baja. Por otro lado, quiero darle una pequeña estructura a lo que escribo, de modo que cuando vuelva a hacerlo más tarde, tenga al menos una familiaridad con la estructura porque me baso en mis métodos que cada proyecto.
Es un poco como un proyecto de bricolaje como en mejoras para el hogar. Está cambiando la estructura y el costo de un profesional por la conveniencia y familiaridad de usar sus propias manos para hacer el trabajo. Lo que espera al final es el mismo proyecto terminado, pero sin la curva de aprendizaje o ideas y conceptos extranjeros de la versión de fuerza industrial.
Pensando en las elecciones que tenemos que hacer como desarrolladores, tomo la decisión de aumentar las solicitudes HTTP para una organización un poco mejor. Sé que me estoy costando un poco de rendimiento, pero lo que obtengo al final es un CSS que es más fácil de entender cuando tengo que verlos a continuación. Puede hacer una elección diferente aquí, y no obtendrá mucha discusión de mi parte. Simplemente prefiero los tamaños de archivo más pequeños organizados de manera consistente sobre el archivo CSS grande o el encabezado en mi HTML.
reset.css : Un css de reinicio es uno que configura todos o al menos la mayoría de los estilos de navegador para anular. Uso un css de reinicio para poder combatir algunas diferencias con los navegadores, y veo el valor cuando me ocupo de los problemas de los navegadores cruzados. No es Nirvana, y hay algunos que prefieren no restablecerse, o lo que recientemente leí, un restablecimiento automático. Prefiero restablecer todo, y uso el sabor de restablecimiento de Eric Meyer.
forms.css: Separé mis estilos de formulario del resto de mi CSS. Quiero saber cuándo estoy trabajando en formularios, y no aparecen del todo, ya que deseo exactamente dónde ir.
global.css: Mi archivo css global es algo que uso para cada proyecto más grande que escribo. Lo que está contenido en este pequeño archivo son clases pequeñas que podría usar una y otra vez en proyectos. Mi regla de oro es, si hay un acceso directo para la propiedad, entonces probablemente no pertenece al archivo global. Yo no usaría la propiedad de la fuente. Por ejemplo:
/ * Colores * / .red color: rojo; fondo: heredar; .blue color: azul; fondo: heredar; .highlight color: negro; fondo: amarillo; / * Listas * / .horizontal list-style-type: none; pantalla: en línea; .vertical tipo de estilo de lista: ninguno; bloqueo de pantalla; / * Text * / .small font-size: small; .large font-size: large; .bold font-weight: negrita;
Tenga en cuenta que estas son clases muy específicas, que se agregan a las reglas de estilos en cascada. Si bien ninguno generalmente se usará como el único estilo para un elemento, se agregan a la descripción del elemento que se aplica a la clase..
style.css: Mi style.css es mi controlador principal de mi estilo. Si piensa en términos de OO para CSS, mi style.css es mi clase, mientras que los otros archivos extienden mi clase (de alguna manera) y se agregan a la herencia de mis objetos principales. Utilizo mi style.css para importar mis otros archivos y para definir mi local, solo proyecto, selectores de id y clases.
Mi método híbrido difiere aquí de la mayoría de la gente, ya que mi regla general con ids es simplemente explicar el elemento en cuestión. Los selectores de ID solo se utilizan una vez por página (incluidos los procesos GET), por lo que quiero que sean de naturaleza muy específica. Para maximizar realmente la reutilización de código, cualquier propiedad fuera de esa explicación de un elemento, realmente preferiría usar un selector de clase. Dado que este ID es único para la página, solo quiero usar explicaciones únicas para este selector.
Por ejemplo, mi ancho sería algo único. Mi relleno y margen serían algo únicos. Mi posición sería algo única. Podría argumentar que la visualización de este selector sería algo única. Mi color para el elemento; no es realmente único Mis antecedentes, de nuevo no son realmente únicos. Para los elementos no realmente únicos, pienso en estos como "describir el elemento" para el que utilizo selectores de clase.
Vamos a ilustrar esto con un pequeño código. Para mayor facilidad, estoy usando un tutorial reciente de Jeffrey Way titulado Consejo rápido: Formas CSS prácticas. ¿Qué pasa si tomamos el CSS original:
#container background: # 666; margen: auto; ancho: 500px; altura: 700px; acolchado superior: 30px; Familia tipográfica: helvética, arial, sans-serif; h1 background: # e3e3e3; fondo: -moz-lineal-gradiente (arriba, # e3e3e3, # c8c8c8); fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, desde (# e3e3e3), hasta (# c8c8c8)); relleno: 10px 20px; margen izquierdo: -20px; margen superior: 0; posición: relativa; ancho: 70%; -moz-box-shadow: 1px 1px 3px # 292929; -webkit-box-shadow: 1px 1px 3px # 292929; cuadro de sombra: 1px 1px 3px # 292929; color: # 454545; texto-sombra: 0 1px 0 blanco;
y transformado a esto:
#container margen: auto; ancho: 500px; altura: 700px; acolchado superior: 30px; Familia tipográfica: helvética, arial, sans-serif; # header-one padding: 10px 20px; margen izquierdo: -20px; margen superior: 0; posición: relativa; ancho: 70%; .norm-background color: #fff; fondo: # 666; .heading-fancy background: # e3e3e3; fondo: -moz-lineal-gradiente (arriba, # e3e3e3, # c8c8c8); fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, desde (# e3e3e3), hasta (# c8c8c8)); -moz-box-shadow: 1px 1px 3px # 292929; -webkit-box-shadow: 1px 1px 3px # 292929; color: # 454545; texto-sombra: 0 1px 0 blanco;
Hasta ahora, todo lo que realmente he hecho es agregar dos nuevas clases del exclusivo selector h1 y abstraer ese h1 a una ID única. No he ganado nada por el momento, y en realidad solo he agregado un poco más de sobrecarga a mi archivo. ¿Dónde está la ventaja entonces??
Si piensa por un momento que podría reutilizar estas descripciones en otro lugar, quizás para un subtítulo, entonces tenemos un poco de reutilización de código. Vamos a ver qué podemos hacer ahora. Así es como se ve originalmente:
Y aquí está cómo se ve con un subtítulo:
Solo he añadido una nueva definición ahora:
# header-two padding: 10px 20px; margen izquierdo: -20px; margen superior: 0; posición: relativa; ancho: 30%;
Junto con un poco de HTML:
Mi rumbo
Mi Sub-encabezado
Tenemos código de reutilización, y tenemos un método que es consistente. Si toma este método y lo aplica, reducirá la cantidad de estilos (u objetos, si lo prefiere) que escribe. Menos código con un método significa un soporte más fácil en una fecha posterior. Realmente, no hay nada estremecedor aquí, pero cuando empiezas a explicar tus selectores de ID pero a tus clases, es un método fácil agregar un poco de cordura a tu código..
Estoy seguro de que alguien, en algún lugar, te ha dicho que nunca uses el atributo de estilo. También estoy seguro de que algunos de ustedes estarán en desacuerdo conmigo, y está bien, puedo soportarlo. Voy a romper esa regla solo un poco con una advertencia. Nunca lo uses sin pensar un poco en lo que estás haciendo. Existen usos legítimos para el atributo de estilo, especialmente cuando se trabaja con aplicaciones complejas que usan llamadas AJAX, pero esos usos provienen de su capa de comportamiento.
Cuando debe usar el atributo de estilo, es cuando necesita hacer una llamada final rápida para anular algo en la pantalla en cascada para el elemento que no tendría sentido agregarlo a su archivo global.css. Por ejemplo, es posible que necesite anular un estilo de su capa de comportamiento en función de una acción del usuario. Se agrega a la complejidad solo un poco, pero se agrega a la cascada. No usaría múltiples propiedades, ya que se trata de una anulación rápida, o más bien, "olvida lo que te acabo de decir, haz esto en su lugar". Es una cascada, y deberías tratar tu CSS como tal, en mi opinión.
Pasamos mucho tiempo poniendo énfasis en nuestra sangría en nuestro código y HTML, pero a menudo no veo el mismo énfasis en nuestro CSS. Hace el mundo de la diferencia. Tomemos de nuevo nuestro ejemplo de trabajo:
Mi rumbo
Mi Sub-encabezado
Si sangramos eso en nuestro marcado, ¿por qué no hacerlo de la misma manera en nuestro CSS?
#container margen: auto; ancho: 500px; altura: 700px; acolchado superior: 30px; Familia tipográfica: helvética, arial, sans-serif; # header-one padding: 10px 20px; margen izquierdo: -20px; margen superior: 0; posición: relativa; ancho: 70%; # header-two padding: 10px 20px; margen izquierdo: -20px; margen superior: 0; posición: relativa; ancho: 30%;
Agrega un poco más de énfasis a lo que está sucediendo con estos selectores de ID. Ahora entiendo que son niños al contenedor div sin comparar mi margen de ganancia.
Cuando decido el diseño de su archivo de estilo, esta es la regla general que uso. Tiene que importar sus archivos CSS adicionales primero comenzando con el archivo reset.css, y luego el resto. Defina sus elementos a continuación, como h1, anclas, etc. A continuación, defina sus selectores de ID en su style.css. Si está trabajando con varias páginas, comente el inicio de cada página nueva dentro de su sangría. Por ejemplo, #contenedor es probablemente un elemento del diseño que es el contenedor de cada página, así que comience con su sangría y trabaje comentando dónde está utilizando cada elemento. Finalmente, define tus clases. Normalmente no sangro mis clases, debido al hecho de que a menudo se reutilizan, y la sangría no muestra dónde se usan.
Finalmente, y probablemente lo más importante, comente su CSS como lo haría con el código del lado de su servidor. Si hay algún contexto que pueda dar a una clase, como los elementos que se usan o la identificación que coincide, coméntelo. Cualquier contexto que le des a su futuro ser es como tener una máquina del tiempo. Marty McFly podría no haber eliminado a ese espeluznante del camino del tráfico si hubiera leído los comentarios de Flux Capacitor primero..
Estoy relativamente seguro de que mis métodos no tendrán un nuevo movimiento de baile con su nombre, ni curarán el cáncer. Ni siquiera estoy seguro de si serían adaptados por una sola persona fuera de mi familia inmediata. Dicho esto, realmente espero que elimines los conceptos y construyas métodos que funcionen para ti. La usabilidad del desarrollo es una meta que todos debemos esforzarnos por alcanzar. Cuando creas una metodología, aumentas exponencialmente tu capacidad de uso interna a medida que desarrollas hábitos que reutilizas y compartes con tu equipo y otros. Corrige los problemas de desarrollo, aumenta la productividad y disminuye el costo general del desarrollo. Es una de esas raras propuestas ganar / ganar que encuentras en tu vida diaria de desarrollo..
Gracias por leer y por favor comparte tus ideas..
Accentsconagua