Aquí está la Guía Oficial de Trello CSS
En septiembre, publiqué un post sobre el estado del CSS Trello. Hablé de nuestra mezcla de prácticas, lo que hemos aprendido, y el tamaño y la naturaleza de nuestro CSS. Tenía algunas ideas sobre la escritura y la estructuración de CSS dispersas por todo el mundo, pero no tenía una lista de reglas duras que se pudieran seguir. Así que lo pensé un poco y luego destiló todo en una guía real.
Las guías CSS son un gran asunto , enormemente importante. Si no tienes una guía CSS, deberías entrar en pánico. Si escribir una guía CSS no es tu departamento, envía un correo electrónico al equipo apropiado pidiéndoles que escriban una. ¿Sabías que puedes escribir «URGENTE» en el asunto para darle más prioridad en muchos clientes de correo electrónico? Querrás usar eso. Usa BCC para que parezca que todos necesitan responder (lo cual deberían hacer). El correo electrónico es la mejor manera de llevar un registro de tareas importantes como esta.
La histeria ha terminado para nosotros, por suerte. Hoy les presento la Guía oficial de Trello CSS.
La Gran Comida para Llevar
Hice todo lo posible para explicar cada una de las secciones y la lógica detrás de ellas. La idea clave está en la parte superior de cada sección. Las ideas importantes están resaltadas. Hay una elaboración. Me gusta pensar que es bastante escaneable y legible. Pero si tienes prisa, como si tuvieras que responder a algunos correos electrónicos, aquí están las grandes entradas:
- Tenga cuidado con las características del preprocesador. Usar sólo importaciones, variables y mezclas.
- Use el patrón .componente-descendiente-descendiente.
- Use el patrón de modificadores .component-descendant.mod-modifier para las clases de modificadores. No hay clases .mod desnudas.
- Use el patrón .componente-descendiente.es-estado para el estado. Manipular las clases .is- en JavaScript (pero no las clases de presentación). No hay clases .is- desnudas.
- No utilice las consultas de los medios de comunicación globales. Incluya variables de consulta de medios en su componente.
- Separa las preocupaciones de presentación y comportamiento usando clases con prefijo .js para el comportamiento. No hay clases de presentación en JavaScript. No hay clases de JavaScript en las hojas de estilo.
- Los prefijos se mezclan con el .m- y sólo se usan para los polígonos del navegador.
- Prefija las clases de utilidad con .u-.
- Usar muchos componentes y archivos.
- Use normalize.css.
- No hay identificaciones, elementos o selectores universales. Usar clases de kebob.
- Usa un estilo consistente.
Una vez más, me metí en el razonamiento de cada uno en la guía real, así que no lo elaboraré aquí. ¡Léelo!
Estado del CSS Trello, febrero de 2015
Desde el último post, pasé algún tiempo aplicando esta guía. La dividí en 63 archivos de 44 archivos. Desenredé algunos componentes y recorté algunas clases de cuerpo. Me alejé de las consultas de los medios globales. Empecé a usar normalize.css. Incluso reduje el tamaño del archivo en un 3%, pero eso fue principalmente porque encontramos un montón de viejo cruft mientras auditábamos nuestro CSS. Todavía hay mucho trabajo por hacer, pero está en un estado mucho mejor.
Como cualquier buena guía o documentación, este es un documento vivo. Estoy seguro de que actualizaremos la guía a medida que la vayamos implementando. Puede incluso cambiar de manera fundamental. Eso está perfectamente bien. Creo que es un punto de partida sólido.
Una guía de CSS debería ahorrarle mucha confusión, debate y costos de mantenimiento. Facilitará a los recién llegados entender sus convenciones y contribuir. Deberías escribir una. No tiene que parecerse a la nuestra, pero debería ser algo que la gente pueda encontrar fácilmente y algo que realmente use. No se arrepentirá.
