Optimización del selector de CSS -- html campo con css campo con ruby-on-rails camp Relacionados El problema

CSS selector optimization


0
vote

problema

Español

Estaba investigando las formas de optimizar el rendimiento de CSS y se preguntaba si es una herramienta existente que convierte a los selectores complicados a los más simplistas.

La herramienta analizaría todas las reglas de CSS y crearía selectores únicos de un solo camino que contengan todos los atributos adecuados. Sería que se veía en todos los nodos DOM y buscar cualquier coincidencia CSS, y si se encuentra algo, agregaría el selector simplificado al nodo. El CSS que se representa solo contiene las versiones simplificadas y el HTML aún tendría las clases / identificaciones originales para que la configuración existente no se rompiera.

un ejemplo exagerado de lo que quiero decir:

  #original {    padding: 5px;    background: blue;  }  #original .nav {    font-size: 24px;  }  #original .nav ul {    background: black;  }  #original .nav ul li {    list-style-type: none;  }  #original .nav ul li a {    text-decoration: none;    color: green;  }    #simplified {    padding: 5px;    background: blue;  }  ._ranClass1 {    font-size: 24px;  }  ._ranClass2 {    background: black;  }  ._ranClass3 {    list-style-type: none;  }  ._ranClass4 {    text-decoration: none;    color: green;  }  
  <div id="original">    <h1>Original CSS</h1>    <div class="nav">      <ul class="_ranClass2">        <li><a href="/">Link 1</a>        </li>        <li><a href="/">Link 1</a>        </li>        <li><a href="/">Link 1</a>        </li>      </ul>    </div>  </div>    <div id="simplified">    <h1>Simplified CSS</h1>    <div class="nav _ranClass1">      <ul class="_ranClass2">        <li class="_ranClass3"><a href="/" class="_ranClass4">Link 1</a>        </li>        <li class="_ranClass3"><a href="/" class="_ranClass4">Link 1</a>        </li>        <li class="_ranClass3"><a href="/" class="_ranClass4">Link 1</a>        </li>      </ul>    </div>  </div>  

Por supuesto, esto requeriría ajustes pesados ​​y puede causar más dolores de cabeza que bien, pero se preguntaba si existe algo como esto.

Editar:

No estoy buscando una manera de escribir CSS más conveniente, existe SASS / SCSS por esa razón. Estoy buscando una manera de optimizar CSS en términos del navegador. EX: Tome el selector original

  #original .nav ul li a {   text-decoration: none;   color: green; }   

Simplificado también

  ._ranClass4 {   text-decoration: none;   color: green; }   

en lugar del navegador que mira a cada nodo 'a', luego revisando para asegurarse de que los padres coincidan, simplemente coincide si el nodo tiene clase ._Ranclass4

Original en ingles

I was looking into ways to optimize css performance and was wondering if their is an existing tool that converts complicated selectors to more simplistic ones.

The tool would look at all css rules and create unique single-pathed selectors that would contain all the proper attributes. It would than looked at every dom node and search for any css matches, and if something is found it would add the simplified selector to the node. The css that is rendered only contains the simplified versions and the html would still have the original classes/ids so the existing setup wouldn't break.

An exaggerated example of what I mean:

#original {    padding: 5px;    background: blue;  }  #original .nav {    font-size: 24px;  }  #original .nav ul {    background: black;  }  #original .nav ul li {    list-style-type: none;  }  #original .nav ul li a {    text-decoration: none;    color: green;  }    #simplified {    padding: 5px;    background: blue;  }  ._ranClass1 {    font-size: 24px;  }  ._ranClass2 {    background: black;  }  ._ranClass3 {    list-style-type: none;  }  ._ranClass4 {    text-decoration: none;    color: green;  }
<div id="original">    <h1>Original CSS</h1>    <div class="nav">      <ul class="_ranClass2">        <li><a href="/">Link 1</a>        </li>        <li><a href="/">Link 1</a>        </li>        <li><a href="/">Link 1</a>        </li>      </ul>    </div>  </div>    <div id="simplified">    <h1>Simplified CSS</h1>    <div class="nav _ranClass1">      <ul class="_ranClass2">        <li class="_ranClass3"><a href="/" class="_ranClass4">Link 1</a>        </li>        <li class="_ranClass3"><a href="/" class="_ranClass4">Link 1</a>        </li>        <li class="_ranClass3"><a href="/" class="_ranClass4">Link 1</a>        </li>      </ul>    </div>  </div>

Of course this would require heavy tweaking and may cause more headaches than good, but was wondering if something like this exists.

EDIT:

I am not looking at a way to write more convenient CSS, SASS/SCSS exists for that reason. I am looking for a way to optimize CSS in terms of the browser. EX: take the original selector

#original .nav ul li a {   text-decoration: none;   color: green; } 

simplified too

._ranClass4 {   text-decoration: none;   color: green; } 

Instead of the browser looking at every 'a' node, then checking to make sure the parents match, it just matches if the node has class ._ranClass4

        
         
         

Lista de respuestas

2
 
vote

Evitaría lo que estás haciendo en tu ejemplo. Sus selectores no deben ser demasiado latos, pero también es agradable que tengan algún nivel de descripción para que sepa cuál es su propósito previsto.

Es posible que desee leer en bem y otras metodologías de CSS que pueden ayudar a organizar y acelerar escribiendo su CSS.

También está buscando algo así como CSSO u otra tarea de Gulp / Grunt. CSSO tiene una característica que desee expresamente, para analizar su marcado y eliminar los selectores inútiles de su CSS. Tenga cuidado, si tiene modificadores DOM en algunos scripts de JS, puede encontrar problemas donde CSSO elimina a estos selectores de su CSS porque, en el momento en que se ejecutó la tarea, no existían en su marcado.

aquí es un buen artículo sobre otros métodos de optimización de CSS .

 

I would avoid what you're doing in your example. Your selectors should not be too wordy, but it's also nice for them to have some level of description so you know what their intended purpose is.

You may want to read into BEM and other CSS methodologies that can help organize and speed up writing your CSS.

You're also probably looking for something like CSSO or another gulp/grunt task. CSSO has a feature you expressly desired, to parse your markup and remove useless selectors from your CSS. Be wary, if you have DOM modifiers in some JS scripts, you might run into issues where CSSO removes these selectors from your CSS because, at the time the task was run, they didn't exist in your markup.

Here is a good article on other methods of CSS optimization.

 
 
 
 

Relacionados problema

11  ¿Cómo ejecuto las pruebas de integración de rieles sin dejar caer los contenidos de DB?  ( How do i run rails integration tests without dropping db contents ) 
He escrito algunas pruebas de integración que me gustaría correr contra una copia de mi base de datos de productos antes de presionar a la producción. Esto me...

14  Ruby On Rails User Management Motor / Framework? (con páginas web)  ( Ruby on rails user management engine framework with web pages ) 
Hay bastantes POST / RECOMENDACIONES RE RAILS DE AUTORIZACIÓN DE RAILS. Sin embargo, lo que estoy preguntando aquí es si hay un rubí popular / buen rubí en el...

16  ¿Modificar las ID de la base de datos de las consola de los carriles?  ( Modifying database ids from rails console ) 
Tengo una base de datos pequeña y he estado agregando entradas a través de una página de rieles. Yo "destruido" una de las entradas y ahora mi secuencia de id...

7  ¿Dónde almacena los rieles datos creados al guardar los objetos de ActiveRecord durante las pruebas?  ( Where does rails store data created by saving activerecord objects during tests ) 
¿Dónde almacena los rieles los datos creados al guardar los objetos de ActiveRecord durante las pruebas? Pensé que sabía la respuesta a esa pregunta: obviam...

1  Ruby en los rieles: usando matrices con LINK_TO  ( Ruby on rails using arrays with link to ) 
Tenía curiosidad sobre cómo usar matrices en el método Link_TO en Ruby en rieles, por ejemplo: controlador: def index @test = [1,2,3] end Ver: ...

0  Las pruebas unitarias de rieles fallan debido a una restricción única en Schema_Migrations  ( Rails unit tests fail because of unique constraint on schema migrations ) 
Estoy tratando de ejecutar rake test:units y sigo recibiendo esto: Mysql::Error: Duplicate entry '2147483647' for key 1: INSERT INTO `ts_schema_migration...

6  ¿Mejor manera de probar RJs en las especificaciones del controlador RSPEC?  ( Best way to test rjs in rspec controller specs ) 
¿Cuál es la mejor manera de asegurarse de que se genere los RJs adecuados en una acción de controlador? Por ejemplo, quiero asegurarme de que un div se resa...

23  ¿Cómo puedo arreglar el error 'STORY DE VISTA DE VISUALIZACIÓN INSCRIBIDA' CON EL COMPLEMENTO DE EXCEXNOTIQUERO EN RAILS 2.1?  ( How do i fix unprocessed view path found error with exceptionnotifier plugin i ) 
Después de actualizar un sitio web de RAILS 1.2 a 2.1, el excepcionnotifier plugin ya no funciona, quejándose de este error : ActionView :: TemplateFinde...

55  Implementación de "Recordarme" en una solicitud de rieles  ( Implementation of remember me in a rails application ) 
My Rails-App tiene una casilla de inicio de sesión con una casilla de verificación "Recordarme". Los usuarios que comprueban esa casilla deben permanecer cone...

22  SystemExit frecuente en Ruby al hacer llamadas HTTP  ( Frequent systemexit in ruby when making http calls ) 
Tengo un sitio web de Ruby On Rails que hace llamadas HTTP a un servicio web externo. Acerca de una vez al día Obtengo un correo electrónico de error System...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos