Freecodecamp: Creación de la guía de estilo CSS de freeCodeCamp

@raisedadead ¿Qué opinas?

Gracias, ¿sabes de alguna manera que se puedan quitar estos? ¿Usa linters?

@raisedadead @tomasvn En mi opinión, el proceso de crear una guía de estilo CSS y ceñirse a ella no producirá resultados útiles a largo plazo. React, Yarn, Babel y muchos otros proyectos de código abierto usan Prettier y otras extensiones similares para su formato de estilo CSS.

En lugar de crear una guía de estilo. Deberíamos decirles a nuestros colaboradores que instalen Prettier en su editor de IDE / Código y estaremos listos para comenzar.
@raisedadead ¿ Pensamientos sobre esto?

Gracias, ¿sabes de alguna manera que se puedan quitar estos? ¿Usa linters?

Más bonito funciona bien;). Le advierte cuando viola cualquier regla de estilo CSS.

En lugar de crear una guía de estilo. Deberíamos decirles a nuestros colaboradores que instalen Prettier en su editor de IDE / Código y estaremos listos para comenzar.

Esconderse de los problemas nunca ayudó a nadie ... 😅!

Estoy totalmente a favor de evitar los formateadores y utilizar linters en su lugar. Automatizar las cosas suena genial y fácil, pero quitan el punto clave de escribir código estándar.

En mi humilde opinión, como la comunidad en torno al aprendizaje no deberíamos rehuir la solución de problemas en el estilo de código señalado por linters.

También tenga en cuenta que Prettier es un formateador de código _Opinionated_

En mi opinión, el proceso de crear una guía de estilo CSS y ceñirse a ella no producirá resultados útiles a largo plazo.

Creo que este es un argumento incorrecto (siéntase libre de demostrar que estoy equivocado si tiene estadísticas).

Si consulta la guía de estilo JS de Airbnb, JS Standard, etc., tienen un ayudante para escribir código estándar y miles de empresas y desarrolladores lo utilizan todos los días.

@raisedadead ¡ No nos

Creo que este es un argumento incorrecto (siéntase libre de demostrar que estoy equivocado si tiene estadísticas).
Si consulta la guía de estilo JS de Airbnb, JS Standard, etc., tienen un ayudante para escribir código estándar y miles de empresas y desarrolladores lo utilizan todos los días.

¡Estoy totalmente de acuerdo contigo en esto! Sus guías de estilo JS son realmente muy útiles.

¡No nos escondemos de los problemas ...! Podemos usar linters, pero la misma tarea se puede hacer con una sola combinación de teclas con Prettier, entonces, ¿por qué estamos tratando de hacer un largo recorrido?

¿Porque queremos escribir código estándar? Los colaboradores son libres de usar cualquier herramienta que deseen, pero eso no exige que no necesitemos una guía.

De todos modos, mantengamos este hilo para comentarios constructivos sobre la guía, siempre podemos tener discusiones en el chat.

@tomasvn RFC parece interesante y, dado que está interesado en los comentarios, ¿cree que será posible que busque algunas guías de estilo establecidas y herramientas en las que podamos inspirarnos?

¿Porque queremos escribir código estándar? Los colaboradores son libres de usar cualquier herramienta que deseen, pero eso no exige que no necesitemos una guía.

Yo también estoy contigo en esto. Bien, vayamos con una guía de estilo y podemos usar stylelint como nuestro linter.

@raisedadead stylelint parece estar bien 👍 Ya que advertiría al colaborador sobre incosistencias en su documento

@tomasvn Acabamos de lanzar nuestro nuevo plan de estudios y plataforma de aprendizaje. ¿Sigues interesado en ayudar con esto?

Todo nuestro CSS necesita una buena refactorización, y esta sería una buena oportunidad no solo para crear una guía de estilo, sino también para darle la vuelta y aplicarla inmediatamente al proyecto, y asegurarnos de que todos nuestros repositorios estén de acuerdo con ella.

@QuincyLarson Claro, puedo tomarme un poco de mi tiempo y ayudarlo a refactorizar el CSS, ya que freecodecamp es una base de código bastante grande, solo indíqueme por dónde debo comenzar

@tomasvn ¡ Eso sería increíble!

freeCodeCamp no tiene tanto CSS. El CSS de freeCodeCamp se encuentra principalmente en "main.less". Y estamos usando Bootstrap 3.0.

Eventualmente podemos pasar a Bootstrap 4.0 o simplemente reescribir nuestro CSS para usar Flexbox. Pero por el momento, estamos usando React Bootstrap en varias de nuestras aplicaciones, y eso está actualmente bloqueado para Bootstrap 3.0. Por lo tanto, recomiendo simplemente ingresar y limpiar el CSS personalizado existente en main.less y hacerlo menos redundante y organizado de manera más lógica.

@QuincyLarson lo consiguió, y main.less se encuentra en client / less / main.less, ¿es este el archivo correcto?

@tomasvn Gracias por tu paciencia, acabo de ver esto. Sí, client / less / main.less debería ser el archivo correcto.

@tomasvn ¿ Necesita ayuda con esto? Estaré feliz de contribuir

@tomasvn, ¿ya has tenido la oportunidad de empezar a trabajar en esto? Si no, @borisyordanov Sí, agradeceríamos sus contribuciones con esto.

@borisyordanov lo siento por la demora, claro, tengo algunos problemas al ejecutar dev env en Windows, así que puedes comenzar, cuando arregle mis cosas, puedo ayudarte a refactorizarlas

@tomasvn Te envié un correo electrónico, la guía si aún no lo ha hecho o pedir ayuda en Gitter

Si todavía hay necesidad, puedo ayudar con esto.

@ Jgriebel1990 No pude ponerme en contacto con tomasvn, por lo que no se ha avanzado hasta donde yo sé. Siéntete libre de hacerte cargo

@ jgriebel1990 no dude en hacerse cargo, no pude hacer que mi copia funcionara en la máquina de Windows, todo lo que puedo hacer es una revisión del código una vez que haya terminado

@tomasvn parece que @ Jgriebel1990 y @borisyordanov no han tenido la oportunidad de abordar esto. ¿Todavía estás interesado en ayudar con esto?

@QuincyLarson Intentaré que funcione en Windows, todavía tengo problemas para ejecutarlo, si no puedo configurar mi entorno, simplemente cierre el hilo.

@tomasvn No te preocupes, ¿

Relacionado: https://github.com/freeCodeCamp/freeCodeCamp/issues/35081

@QuincyLarson Sin suerte, ejecutándolo localmente

@tomasvn ¿Qué problemas encontró al configurar localmente?

@tomasvn Lea esto: https://github.com/freeCodeCamp/freeCodeCamp/blob/master/docs/how-to-setup-freecodecamp-locally.md

@raisedadead Con las actualizaciones de https://github.com/freeCodeCamp/design-style-guide , ¿se necesita este problema?

Está más en la hoja de ruta. Eventualmente será el recurso central para nuestros componentes de UI.

Estilo de borde CSS
La propiedad border-style especifica qué tipo de borde mostrar.

Se permiten los siguientes valores:

punteado: define un borde punteado
discontinua: define un borde discontinuo
sólido: define un borde sólido
double: define un borde doble
groove: define un borde acanalado 3D. El efecto depende del valor del color del borde.
cresta: define un borde estriado en 3D. El efecto depende del valor del color del borde.
recuadro: define un borde recuadro 3D. El efecto depende del valor del color del borde.
inicio: define un borde de inicio 3D. El efecto depende del valor del color del borde.
none: no define ningún borde
oculto: define un borde oculto
La propiedad de estilo de borde puede tener de uno a cuatro valores (para el borde superior, el borde derecho, el borde inferior y el borde izquierdo).

EJEMPLO-
p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}

¡Oye! ¿Cuál es el progreso en esto? ¡Estoy disponible para ayudar!

@ManasMahanand , gracias por su interés.
Sería genial si pudiera buscar en los linters css disponibles, compararlos y ver si hay algo mejor que stylelint.
Luego, agregue el linter a nuestro repositorio y cambie los archivos CSS para asegurarse de que el repositorio esté libre de errores.

@madabdolsaheb ¡Lo hará!

@ahmadabdolsaheb Espera, ¿qué quieres decir con agregar al repositorio?

¿Quieres que instale linter como una dependencia, como ya lo es eslint?

¿O hay alguna forma de instalar pruebas en github, por lo que no permitirá la fusión a menos que se siga la guía de estilo?

Ok, parece que stylelint es una buena opción en sí misma. Lo estoy instalando.

Para experimentar, estableceré las reglas sugeridas por OP. Luego eliminaré todas las reglas y abriré un pr. Luego podemos discutir y establecer reglas

https://stylelint.io/user-guide/rules/about

Puede echar un vistazo a este enlace para ver los tipos de reglas que se pueden establecer

actualmente ya existe un comando lint: css que usa más bonito. Podemos cambiarlo para usar stylelint.

De todos modos, lo he instalado y detecta correctamente los errores según las reglas establecidas. ¿Debo abrir un PR?

No es necesario eliminar más bonito, más bonito tiene una configuración para las reglas de stylelint que puede usar para extender un archivo de configuración más bonito

Increíble. Trabajaré en eso mañana.

No encontré una configuración más bonita para las reglas de stylelint (o cómo hacerlo), pero actualmente he instalado otro paquete stylelint-config-prettier que buscará conflictos y desactivará cualquier regla que entre en conflicto.

Lo que estoy pensando es en lint: comando

(Opinión) Creo que podemos escribir todas las reglas de stylelint personalizadas en función de lo que tenga sentido para fcc, e incluso eliminar por completo las más bonitas. Esto es solo una opinión, ustedes deciden.

Gracias @ManasMahanand por tu progreso. Estoy etiquetando a @ojeytonwilliams para una segunda opinión.

Creo que más bonito hace un buen trabajo con el formato, así que prefiero mantenerlo. Si usamos https://github.com/prettier/stylelint-prettier, entonces se usa prettier como un complemento de stylelint y obtenemos lo mejor de ambos mundos.

Esto refleja el enfoque que ya usamos para el linting de JavaScript.