Intrebare fantezista, css to html in IDE

Exista in vre-un IDE urmatorul tool?

Sa zicem ca ai facut urmatorul scss/css (nu va luati de cod, stiu ca nu respectia niciun standard):

.contact-row {
  &__flag {
    width: 10px;
    height: 20px;
    background: red;
  }
  &__select{
    width: 20px;
    background: #802f74;
  }
  &__info{
    &__name{
      color: #1e1e20;
      font-size: 1.8rem;
    }
    &__details {
      color: #747474;
      font-size: 1.3rem;
    }
  }
}

As vrea sa pot selecta codul de mai sus si sa aleg: “Create html structure” si automat sa imi pun

<div class="contact-row">
<div class="contact-row__flag"></div>
<!-- the rest of the html -->
</div

Daca nu html macar un emmet shortcut si dau eu TAB

Nu știu cât de posibil este. De unde știi ce tag va fi &__select ? Va fi div, span sau un simplu select ?

1 Like

Raspunsul tau este incurajator: nu spui ca e inutil :smile:

Ca e div sau span e irelevant, pune default div. Sa schimbi tagul e usor apoi in orice div. Intr-adevar la select ar fi o problema, insa de obicei select-urile le stilizezi cu o clasa separata.

In plus pentru ar putea interpreta un cod astfel:

.cell{
  span.title{
    font-size:smaller;
 }
}

in

<div class="cell"><span class="title"></span></div>

E clar ca nu ar salva paduri intregi, insa de fiecare data cand fac un astfel de css am o frustrare ca nu am automat si html-ul. Pana sa folosesc scss, faceam lucrurile invers: faceam html-ul ca structura cu stiluri inline si apai aveam comenzi de tipul “Extract css inline”

P.S: Ideea se intersecteaza cu o alta idee de a mea: sa fac un plugin in PhpStorm. Sa vede cu timpul cum stau. Important este sa nu existe deja asta

Pe de altă parte, cred că ar fi mult mai ușor să faci invers: din HTML să-ți genereze CSS :smile:

Am stat și am mai gândit ideea ta; cred că s-ar putea folosi un fel de „template tags” în comentarii:

.foo {
  //tag:input:email
  color:red;
}

În SASS are sens, că aceste comentarii vor fi eliminate la compilare.


Despre sintaxa ta:

  • nesting în HTML va fi greu de intuit (de un parser) dacă nu se folosește o sintaxa a selectorilor ca în exemplul tău;
  • Mă întreb cum s-ar putea face parsarea dacă nu se folosește o sintaxă de genul ăsta :smile:
  • De multe ori ai nevoie de un element ce ar trebui să fie în DOM, dar să nu fie stilizat (e.g. form);
  • sinatxa ta este OK dacă nu ai multe reguli/sub-selectori; în caz contrar, tot codul va fi dificil de urmărit. Uncle Bob zice așa:

The first rule of functions is that they should be small. The second rule of functions is that they should be smaller than that. Functions should not be 100 lines long. Functions should hardly ever be 20 lines long.

Sigur, ideea este pentru limbajele de programare, dar consider că este cel puțin la fel de valabilă și pentru CSS.

1 Like

Cred că vrei Emmet

1 Like

@andreieftimie: E posibil sa vreau asta. Eu folosesc emmet dar nu stiu cum sa fac asta.

Intr-adevar, pentru pluginul de care ziceam ma gandeam sa folosesc emmet

1 Like