Expresiones regulares para búsquedas avanzadas (minitutorial)

Las expresiones regulares son unas convenciones para las búsquedas de cadenas que van mucho más allá del uso de simples comodines *.
Se pueden usar en programas de edición, en javascript e incluso hay algo parecido en CSS.

En todos los programas serios  de edición de código hay un icono u opción para utilizar expresiones regulares en las búsquedas.  Para ello se utilizan una serie de caracteres que tienen un significado especial para acotar los resultados. Es un tema bastante complejo, a poco que refinas una búsqueda te encuentras con un chorro de caracteres que suena a klingon, pero con estos tips espero que sirvan para introduciros en el tema o sacaros de algun apuro.

El . significa cualquier carácter 
Por ejemplo, tod.s nos encontraría todos, todas, y hasta los alternativos todxs y tod@s.

[a-z] : se usa para definir un rango de caracteres.
Por ejemplo, haciendo una busqueda con thumb_[0-2][0-9] Nos va a encontrar todos los textos que tengan thumb_ y luego dos dígitos en el rango indicado, como thumb_26 , thumb_00,  thumb_16 dejando fuera terminos como  thumb_38,  thumb_a5  etc.

+ significa que coincide una o más veces con el elemento anterior.
Por ejemplo la búsqueda anterior nos devolveria todos los ” thumb_” y dos dígitos OJO y SOLO DOS DIGITOS, no nos devolveria  thumb_4 porque tiene solo uno, ni thumb_124,  pero si lo hacemos con thumb_[0-9]+ nos encontraría thumb_1 , thumb_24,  thumb_235,  thumb_283745 etc.

| sirve para separar cadenas opcionales.
Por ejemplo, si queremos buscar todos los sitios donde aparezca la cadena configuración pero hay faltas de ortografía  podríamos usar configuraci(o|ó)n  y nos devolverá tanto las búsquedas que tengan acento como las que no.

 
(?) sirve para añadir opciones a la busqueda.
Por ejemplo, si queremos que en la búsqueda nos encuentre tanto mayusculas como minúsculas añadiremos 
(?i) de forma que (?i) bot(o|ó)n nos encontraría Boton, botÓn, botóN, etc.

\ significa escape, o sea, “no interpretes el carácter siguiente como un comando”
Pongamos que estamos buscando el carácter 
+, como hemos visto que + significa una o más veces, ponemos la barra invertida delante para que sepa que buscamos el carácter y no lo interprete , o si buscamos las aperturas de paréntesis haríamos \( 

\s representa un espacio en blanco y * significa cero o mas veces el elemento anterior
Pongamos que queremos buscar las propiedades de la  pseudoclase header, pero solo cuando sea un nombre de clase, no un tag, no queremos que nos encuentre <header> en el html, sino las clases header{ que están puestas inline , tendríamos que hacer header{  pero no sabemos si los css están correctamente formateados, a veces está como header{ o header { , luego haremos la búsqueda como header\s*{ y al buscar cero o más espacios entre el nombre y la llave nos los encontrará todos. Aun podría pasar por alto resultados, cuando la definición de header estuviera agrupada con otros nombres de clases de forma parecida a .container, header, footer { 

Ademas para rizar el tirabuzón, vamos a buscar todos los sitios donde header tenga la propiedad display:none para lo que nos hará falta usar unos caracteres de control más
\n \r son retorno de carro y retorno de linea y (?!loquesea) se utiliza para excluir
Para empezar, añadiremos los retornos de carro y de linea entre header y display:none, y los espacios opcionales  para esquivar el mal formateado
header(.|\r\n|\r|\n)*display\s:\snone
o sea,header más los caracteres, los retornos y saltos de linea que haya más display:none
El problema es que nos podría devolver esto porque se limita a encontrar un display:none que aparezca después de un txtprecio: sin importar lo que tengan en medio.

header{ display:block}

 .logo{display:none}  
Para evitarlo, le decimos que no nos devuelva los resultados si en medio no hay un } que cierre la clase.
txtprecio((?!}).|\r\n|\r|\n)*display\s:\snone

Esto nos encontraría todos los casos de los que hablábamos antes, incluyendo cuando header se encuentra en una lista de clases compartiendo propiedades.

Todo esto apenas es la punta del iceberg, hay muchos mas carácteres de control, para ampliar la información podéis empezar por:

Y algunos sitios donde poder probar los regex de forma que pegais un texto y al escribir una regex os iluminará las coincidencias para experimentar  interactivamente.

Ventajas de usar SASS aunque no sepas SASS

Pongamos que por algún motivo no quieres o no puedes  aprender SCSS (o LESS, o SASS, etc. son basicámente lo mismo). No vas a utilizar anidaciones, mixins, variables ni ninguna otra de las ventajas que ofrece y quieres seguir trabajando con CSS “plano”.
Aun así, tendrías que considerar usar SASS en tu flujo de trabajo por las siguientes razones:

Trabajarías exactamente igual

Los archivos .css son archivos validos para SCSS. No tendrías que aprender ninguna sintaxis nueva y puedes seguir usando los archivos que ya utilizas.

Mejorarías  mucho la carga con archivos css modulares

Pongamos que cargas en tu web el ubicuo Bootstrap, el archivo .css de tu pagina y dos o tres .css externos, ademas de los @import con las fuentes que utilices de Google Fonts. Todos esos archivos hay que cargarlos por separado antes del render de la pagina y ralentizan mucho la fase más importante de la carga de una web. Si los incluyes como @imports de SASS en una hoja .scss y luego compilas, tendrás un único archivo .css (y una única llamada al servidor con todo lo que necesitas.

Te olvidas de los fallbacks

Si compilas con GULP en vez de con el propio SASS, ademas de compilar mucho más rápido,  puedes incluir el plugin autoprefixer que añade los -webkit-,  -moz-,  -msfilter- etc. necesarios para visualizarse correctamente en todos los navegadores que le configures. Escribes el código de una forma mas rápida y limpia y te olvidas de tener que andar consultando caniuse.com e incluyendo manualmente los prefijos, que es un coñazo. Utiliza los dotas del propio caniuse.com y puedes incluso configurarlo cronológicamente. Yo lo configuro para todos los navegadores de los últimos 7 años.

Avisa de los errores.

Trabajando con .css puedes olvidar un punto y coma, o equivocarte en la ortografía, y no te darás cuenta hasta que visites la parte de la web afectada, SASS  no te permite compilar un archivo si contiene errores, avisándote de su localización.

En fin, no necesitas aprender SASS/SCSS para empezar a utilizarlo y aprovechar muchas de sus ventajas. Luego empezaras a utilizar variables, anidaciones, etc. y te preguntaras como podías trabajar antes sin el.

Algunas utilidades online que uso a diario

O sino a diario, casi.

www.caniuse.com
La que más utilizo. La uso para consultar el estado de soporte de propiedades css y usarlas o no según el target. Te indica el nivel de soporte de los navegadores, cuando es necesario utilizar prefijos y, si ordenas por fecha, desde cuando están soportadas. De esta forma, si una propiedad no es universal desde hace al menos 4 años (es difícil que un móvil aguante tanto) no la uso.
Si el target es un público más especializado, o de alto nivel, se puede ser más flexible. Ojo con Opera móvil, no acepta nada.

https://autoprefixer.github.io
Esta es la siguiente estación despues de pasar por la anterior. Puedes poner tus definiciones css y automaticamente les añade los prefijos webkit y moz necesarios. Porque no siempre es tan fácil como añadir -moz- a las propiedades, muchas veces tienen cambios de sintaxis específicos y con un copipaste del código te aseguras que se vea bien en el maximo de navegadores posible.

https://userstyles.org
Esta no es una pagina, sino una extensión para el navegador. Permite añadir una hoja de estilos personalizada que se superpone a la del dominio a la que la asignes. Puedes “corregir” el estilo de una pagina de forma que cada vez que entres se le aplicará, o probar una corrección de css sobre una página antes de introducirla en su .css

http://waifu2x.udp.jp
Esta no la uso practicamente, pero no deja de ser muy interesante tenerla a mano. Hay veces que no necesitamos una imagen, un logo habitualmente, en un tamaño más grande pero no disponemos de los archivos fuente. Esta página utiliza no se que algoritmos para doblar el tamaño minimizando el pixelado y los resultados son muchas veces sorprendentemente buenos y perfectamente utilizables.

https://codepen.io/pen/
Para probar código en tiempo real y de forma muy rápida, tres ventanas donde incluir html, css y js y una ventana de resultados donde comprobar las cosas al momento y de forma muy rápida.