CSS-Modules vs klasyczne podejście w react

0

Jak piszecie obecnie css? próbowałem css-modules wbudowane w webpacka, jednak średnio mi to podeszło. Zaś react-css-modules nie potrafiłem skonfigurować do pracy z hooks.
Obecnie korzystam z SASS + BEM i dosyć dobrze mi się z tego korzysta.

2

Normalne CSS.
W projektach, gdzie mi zależy dodatkowo własny skrypt minifikatora i pakera, który robi ze wszystkich CSS-ów jeden plik.

Do samego pisania Notepad++ z wtyczką QuickText, która pozwala pisać abrewiacjami rozwijanymi przez Ctrl+;
typu:

bc=background-color:$;
bob=border-bottom:1px solid $;
bobc=border-bottom-color:$;
boblra=border-bottom-left-radius:$;

.b=block
.ib=inline-block

Albo przechodzić cyklicznie przez grupę wartości:

left=right
right=center
center=justify
justify=left

Ew. jeszcze podpowiadać wartości.

0

własny skrypt minifikatora i pakera

Napiszesz coś więcej w tym temacie? Bo spotkałem się z pakowaniem własnych styli/JS przy użyciu gotowych rozwiązań, ale nie kojarzę, żeby ktoś pisał własne skrypty robiące to zadanie. Rozwiń proszę wątek, bo zabrzmiało to dość ciekawie.

1
cerrato napisał(a):

własny skrypt minifikatora i pakera

Napiszesz coś więcej w tym temacie? Bo spotkałem się z pakowaniem własnych styli/JS przy użyciu gotowych rozwiązań, ale nie kojarzę, żeby ktoś pisał własne skrypty robiące to zadanie.

Bo teraz nikt nic własnego nie robi. Wszyscy tylko instalują wtyczki do bibliotek na frejmłorkach :p

Rozwiń proszę wątek, bo zabrzmiało to dość ciekawie.

Nie jest to mistrzostwo świata, ale na moje potrzeby wystarcza.

Plik konfiguracyjny (zmienne/ini_minifikator.php):

<?php
// --- czy uruchomić ---
// 0 - dezaktywuj | 1 - uruchom // wyłącznik ogólny
$st_minifikator__uruchom=1;
// 0 - dezaktywuj | 1 - sprawdź, czy są nowe | 2 - wymuś uruchomienie niezależnie od daty
$st_minifikator__uruchom_html=1;
$st_minifikator__uruchom_css=1;
$st_minifikator__uruchom_js=1;
// --- /czy uruchomić ---

// --- czy przetwarzać ---
// 0 - zachowaj oryginał | 1 - przetwarzaj
$st_minifikator__przetwarzaj_html=1;
$st_minifikator__przetwarzaj_css=1;
$st_minifikator__przetwarzaj_js=1;
// --- /czy przetwarzać ---

// --- listy plików ---
// html
$st_tab_minifikator_html[]="zmienne/_div_panele_body.php";
$st_tab_minifikator_html[]="zmienne/_div_panel_prawy.php";
// css
$st_tab_minifikator_regula_css[]="-";                                    $st_tab_minifikator_css[]="zmienne/_style.css";
$st_tab_minifikator_regula_css[]="@media screen and (max-width: 720px)"; $st_tab_minifikator_css[]="zmienne/_style__ekran_1_sredni.css";
$st_tab_minifikator_regula_css[]="@media screen and (max-width: 440px)"; $st_tab_minifikator_css[]="zmienne/_style__ekran_2_maly.css";
$st_tab_minifikator_regula_css[]="@media screen and (max-width: 270px)"; $st_tab_minifikator_css[]="zmienne/_style__ekran_3_mikro.css";
// js
$st_tab_minifikator_naglowek_js[]="zmienne";    $st_tab_minifikator_js[]="zmienne/_ini_konfiguracja_funkcje_responsywne.js";
$st_tab_minifikator_naglowek_js[]="funkcje";    $st_tab_minifikator_js[]="_funkcje.js";
$st_tab_minifikator_naglowek_js[]="funkcje rs"; $st_tab_minifikator_js[]="_funkcje_responsywne.js";
// --- /listy plików ---
?>

Właściwy minifikator (modul_minifikator.php)

<?php
// --- funkcje minifikacji ----------------------------------------------
// --- minifikuj HTM ---
function minifikuj_htm ($str) {
  // --- wstępna obróbka
  $str = "\n".$str."\n";
  $str = str_replace("\r", "", $str);
  // --- /wstępna obróbka

  // --- /usuń komentarze
  $str = preg_replace('/<!--.*?-->/s', '', $str); // <!--x-->/
  // --- /usuń komentarze

  // --- zaznacz TAG-i pierszego poziomu
  $str = str_replace("\n<", "\n<:n:><", $str);   // dodaj znacznik przed: <
  $str = str_replace("\n<:n:></", "\n</", $str); // usuń znacznik przed: </
  // --- /zaznacz TAG-i pierszego poziomu

  // --- usuń spacje i tabulatory
  $str = preg_replace('/\n[ \t\f]+/', "\n", $str); // |_
  $str = preg_replace('/[ \t\f]+\n/', "\n", $str); // _|
  $str = preg_replace('/>[ \t\f\n]+</s', "><", $str); // >_<
  // --- /usuń spacje i tabulatory

  // --- zmień przełamania wierszy
  $str = preg_replace('/[\n]+/', '', $str); // usuń przełamania wiersza
  $str = str_replace("<:n:>", "\n", $str);  // dodaj przełamania dla TAG-ów pierwszego poziomu
  $str = preg_replace("/^\n/", "", $str);   // usuń pierwszą pustą linię
  $str = preg_replace("/\n$/", "", $str);   // usuń ostatnią pustą linię
  // --- /zmień przełamania wierszy  

  return $str;
}
// --- /minifikuj HTM ---

// --- minifikuj CSS ---
function minifikuj_css ($str) {
  // --- wstępna obróbka
  $str = "\n".$str."\n";
  $str = str_replace("\r", "", $str);
  // --- /wstępna obróbka

  // --- /usuń komentarze
  $str = preg_replace('/\/\*.*?\*\//s', '', $str); // /*x*/
  // --- /usuń komentarze

  // --- usuń spacje i tabulatory
  $str = preg_replace('/\n[ \t\f]+/', "\n", $str); // |_
  $str = preg_replace('/[ \t\f]+\n/', "\n", $str); // _|

  $str = preg_replace('/[ \t\f]*:[ \t\f]*/', ':', $str);   // _:_ 
  $str = preg_replace('/[ \t\f]*;[ \t\f]*/', ';', $str);   // _;_ 
  $str = preg_replace('/[ \t\f]*,[ \t\f]*/', ",", $str);   // _,_

  $str = preg_replace('/[ \t\f]*\>[ \t\f]*/', '>', $str); // _>_
  $str = preg_replace('/[ \t\f]*\+[ \t\f]*/', '+', $str); // _+_
  $str = preg_replace('/[ \t\f]*\~[ \t\f]*/', '~', $str); // _~_

  $str = preg_replace('/[ \t\f]*\{[ \t\f]*/', '{', $str); // _{_
  $str = preg_replace('/[ \t\f]*\}[ \t\f]*/', '}', $str); // _}_

  $str = preg_replace('/[ \t\f]*\([ \t\f]*/', '(', $str); // _(_
  $str = preg_replace('/[ \t\f]*\)[ \t\f]*/', ')', $str); // _)_
  // --- /usuń spacje i tabulatory

  /* --- przywróć spacje w calc() --- */
  $str = str_replace("%-", '% - ', $str);
  $str = str_replace("%+", '% + ', $str);
  /* --- /przywróć spacje w calc() --- */

  // --- dodaj spacje dla @supports
  $str = str_replace('@supports(',     '@supports (', $str);
  $str = str_replace('@supports not(', '@supports not (', $str);
  $str = str_replace(')and(',          ') and (', $str);  
  $str = str_replace(')or(',           ') or (', $str);
  $str = str_replace('(not(',          '( not (', $str);
  // --- /dodaj spacje dla @supports

  // --- usuń wartości zerowe
  $str = str_replace(":0px;", ':0;', $str);
  $str = str_replace(":0em;", ':0;', $str);
  $str = str_replace(":0ex;", ':0;', $str);
  $str = str_replace(":0%;",  ':0;', $str);
  // --- /usuń wartości zerowe

  // --- usuń puste klasy
  $str = preg_replace('/\n.+\{\n\}/', '', $str); // |x{|}
  // --- /usuń puste klasy

  // --- zmień przełamania wierszy
  $str = preg_replace('/[\n]+/', '', $str); // usuń przełamania wiersza
  $str = str_replace("}", "}\n", $str);     // dodaj przełamania wiersza po "}"
  $str = str_replace("\n}", "}", $str);     // usuń przełamanie przed "\n}"
  $str = preg_replace("/^\n/", "", $str);   // usuń pierwszą pustą linię  
  $str = preg_replace("/\n$/", "", $str);   // usuń ostatnią pustą linię
  // --- /zmień przełamania wierszy  

  return $str;
}
// --- /minifikuj CSS ---

// --- minifikuj JS ---
function minifikuj_js ($str) {
  // --- wstępna obróbka
  $str = "\n".$str."\n";
  $str = str_replace("\r", "", $str);
  // --- /wstępna obróbka

  // --- /usuń komentarze
  // wieloliniowe
  $str = preg_replace('/\/\*.*?\*\//s', '', $str); // /*x*/
  // jednoliniowe
  $str = preg_replace('/\/\/[^\'\"]*?\n/', "\n", $str);     // //[^'"]\n
  // UWAGA: nie usuwa komentarzy jednoliniowych po poleceniach z cudzysłowami, np: 
  // komenda; // ustaw "coś"
  // --- /usuń komentarze

  // --- usuń spacje i tabulatory
  $str = preg_replace('/\n[ \t\f]+/', "\n", $str); // |_
  $str = preg_replace('/[ \t\f]+\n/', "\n", $str); // _|

  $str = preg_replace('/[ \t\f]*:[ \t\f]*/', ':', $str);  // _:_ 
  $str = preg_replace('/[ \t\f]*;[ \t\f]*/', ';', $str);  // _;_ 
  $str = preg_replace('/[ \t\f]*,[ \t\f]*/', ',', $str);  // _,_
  $str = preg_replace('/[ \t\f]*\=[ \t\f]*/', '=', $str); // _=_
  $str = preg_replace('/[ \t\f]*\![ \t\f]*/', '!', $str); // _!_

  $str = preg_replace('/[ \t\f]*\<[ \t\f]*/', '<', $str); // _<_
  $str = preg_replace('/[ \t\f]*\>[ \t\f]*/', '>', $str); // _>_

  $str = preg_replace('/[ \t\f]*\{[ \t\f]*/', '{', $str); // _{_
  $str = preg_replace('/[ \t\f]*\}[ \t\f]*/', '}', $str); // _}_

  $str = preg_replace('/[ \t\f]*\([ \t\f]*/', '(', $str); // _(_
  $str = preg_replace('/[ \t\f]*\)[ \t\f]*/', ')', $str); // _)_
  // --- /usuń spacje i tabulatory

  // --- zmień przełamania wierszy
  $str = preg_replace('/[\n]+/', '', $str);           // usuń przełamania wiersza
  $str = str_replace("function", "\nfunction", $str); // dodaj przełamania wiersza
  $str = preg_replace("/^\n/", "", $str);             // usuń pierwszą pustą linię
  $str = preg_replace("/\n$/", "", $str);             // usuń ostatnią pustą linię
  // --- /zmień przełamania wierszy

  return $str;
}
// --- /minifikuj JS ---
// --- /funkcje minifikacji ----------------------------------------------

// --- minifikuj HTML ----------------
if ($st_minifikator__uruchom_html>0) {
  // --- pętla plików
  $plikow_html_ile = count($st_tab_minifikator_html);  
  //
  for ($pnr=0; $pnr<$plikow_html_ile; $pnr++) {
    $temp_adres_stary=$st_tab_minifikator_html[$pnr];
    // --- utwórz adres nowego pliku
    $temp_adres_nowy = $temp_adres_stary;
    $temp_adres_nowy = preg_replace('/^_/', "", $temp_adres_nowy);
    $temp_adres_nowy = str_replace("/_", "/", $temp_adres_nowy);
    // --- /utwórz adres nowego pliku

    // --- jeśli plik stary ma poprawną nazwę i istnieje
    if (($temp_adres_nowy != $temp_adres_stary) && is_file($temp_adres_stary)) {
      // --- porównaj daty
      $data_stary = filemtime($temp_adres_stary);
      $data_nowy = 0;
      if (is_file($temp_adres_nowy)) $data_nowy = filemtime($temp_adres_nowy);
      if ($st_minifikator__uruchom_html==2) $data_nowy = 0;
      // --- /porównaj daty

      // --- jeśli zmodyfikowano stary lub wymuszono uruchmienie
      if ($data_nowy < $data_stary ) {
        $str = file_get_contents($temp_adres_stary); // czytaj
        if ($st_minifikator__przetwarzaj_html == 1) $str = minifikuj_htm($str); // minifikuj
        file_put_contents($temp_adres_nowy, $str);   // zapisz
      }
     // --- /jeśli zmodyfikowano stary lub wymuszono uruchmienie
    }
    // --- /jeśli plik stary ma poprawną nazwę i istnieje
  }
  // --- /pętla plików
}
// --- /minifikuj HTML ----------------

// --- minifikuj CSS ----------------
if ($st_minifikator__uruchom_css>0) {
  // --- czytaj dane pliku docelowego
  $temp_adres_nowy="zmienne/style.css";
  $data_nowy = 0;
  if (is_file($temp_adres_nowy)) $data_nowy = filemtime($temp_adres_nowy);
  if ($st_minifikator__uruchom_css==2) $data_nowy = 0;
  // --- /czytaj dane pliku docelowego

  // --- pętla plików - test daty
  $czy_sa_nowsze_css = 0;
  $plikow_css_ile = count($st_tab_minifikator_css);
  //
  for ($pnr=0; $pnr<$plikow_css_ile; $pnr++) {
    $temp_adres_stary=$st_tab_minifikator_css[$pnr];
    // --- jeśli istnieje plik stary
    if (is_file($temp_adres_stary)) {
      $data_stary = filemtime($temp_adres_stary);
      if ($data_nowy < $data_stary ) $czy_sa_nowsze_css=1;
    }
    // --- /jeśli istnieje plik stary
  }
  // --- /pętla plików - test daty

  // --- jeśli są nowsze pliki lub wymuszono uruchomienie
  if ($czy_sa_nowsze_css==1) {
    $str_suma_nowy="";
    // --- pętla plików - odczyt
    for ($pnr=0; $pnr<$plikow_css_ile; $pnr++) {
      $temp_adres_stary=$st_tab_minifikator_css[$pnr];
      $temp_regula_stary=$st_tab_minifikator_regula_css[$pnr];
      // --- jeśli istnieje plik źródłowy
      if (is_file($temp_adres_stary)) {
        $str = file_get_contents($temp_adres_stary); // czytaj
        if ($st_minifikator__przetwarzaj_css == 1) $str = minifikuj_css($str); // minifikuj
        //
        if ($pnr>0) $str_suma_nowy .= "\n";
        if ($temp_regula_stary=="-") $str_suma_nowy .= $str;
        if ($temp_regula_stary!="-") $str_suma_nowy .= "$temp_regula_stary{\n" . $str . "\n}";
      }
      // --- /jeśli istnieje plik źródłowy
    }
    // --- pętla plików - odczyt

    // --- zapisz nowy plik z podsumowaniem
     file_put_contents($temp_adres_nowy, $str_suma_nowy); // zapisz
    // --- /zapisz nowy plik z podsumowaniem
  }
  // --- jeśli są nowsze pliki lub wymuszono uruchomienie
}
// --- /minifikuj CSS ----------------

// --- minifikuj JS ----------------
if ($st_minifikator__uruchom_js>0) {
  // --- czytaj dane pliku docelowego
  $temp_adres_nowy="zmienne/skrypty.js";
  $data_nowy = 0;
  if (is_file($temp_adres_nowy)) $data_nowy = filemtime($temp_adres_nowy);
  if ($st_minifikator__uruchom_js==2) $data_nowy = 0;
  // --- /czytaj dane pliku docelowego

  // --- pętla plików - test daty
  $czy_sa_nowsze_js = 0;
  $plikow_js_ile = count($st_tab_minifikator_js);
  //
  for ($pnr=0; $pnr<$plikow_js_ile; $pnr++) {
    $temp_adres_stary=$st_tab_minifikator_js[$pnr];
    // --- jeśli istnieje plik stary
    if (is_file($temp_adres_stary)) {
      $data_stary = filemtime($temp_adres_stary);
      if ($data_nowy < $data_stary ) $czy_sa_nowsze_js=1;
    }
    // --- /jeśli istnieje plik stary
  }
  // --- /pętla plików - test daty

  // --- jeśli są nowsze pliki lub wymuszono uruchomienie
  if ($czy_sa_nowsze_js==1) {
    $str_suma_nowy="";
    // --- pętla plików - odczyt
    for ($pnr=0; $pnr<$plikow_js_ile; $pnr++) {
      $temp_adres_stary=$st_tab_minifikator_js[$pnr];
      $temp_naglowek_stary=$st_tab_minifikator_naglowek_js[$pnr];
      // --- jeśli istnieje plik źródłowy
      if (is_file($temp_adres_stary)) {
        $str = file_get_contents($temp_adres_stary); // czytaj
        if ($st_minifikator__przetwarzaj_js == 1) $str = minifikuj_js($str); // minifikuj
        //
        if ($pnr>0) $str_suma_nowy .= "\n";
        $str_suma_nowy .= "/* $temp_naglowek_stary */\n" . $str;
      }
      // --- /jeśli istnieje plik źródłowy
    }
    // --- pętla plików - odczyt

    // --- zapisz nowy plik z podsumowaniem
     file_put_contents($temp_adres_nowy, $str_suma_nowy); // zapisz
    // --- /zapisz nowy plik z podsumowaniem
  }
  // --- jeśli są nowsze pliki lub wymuszono uruchomienie
}
// --- /minifikuj JS ----------------
?>

Uruchamiane przy każdym otwarciu strony. Ew. nie uruchamiane, jeśli się zablokuje w ini.

1

@cerrato: A czy możesz wkleić jakiś przykładowy plik wejściowy oraz to, co zostanie z niego stworzone?

Tylko fragmenty:

CSS

/* --- html --- */
HTML {
  border:0px solid red;
  margin:0px;
  padding:0px;  
  /* --- */
  background-color:#ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size:12px;
}
/* ---/ html --- */

/* --- body --- */
BODY {
  border:0px solid green;
  margin:auto; 
  margin-top:0px;
  margin-bottom:0px;
  padding:0px;
  width:calc(100% - 10px); /* takie same wartości w elementach fixed */
  max-width:900px;         /* takie same wartości w elementach fixed */
  /* --- potrzebne do pozycjonowania absolutnego elementów względem BODY */
  position:relative;
  border-top:1px solid transparent;
  margin-top:-1px;
  /* --- /potrzebne do pozycjonowania absolutnego elementów względem BODY */
  /* --- */
}
/* --- body --- */
HTML{border:0px solid red;margin:0;padding:0;background-color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:12px;}
BODY{border:0px solid green;margin:auto;margin-top:0;margin-bottom:0;padding:0;width:calc(100% - 10px);max-width:900px;position:relative;border-top:1px solid transparent;margin-top:-1px;}

JS

/* --- rozwiń gałąż archiwum --- */
function rozwin_galaz_archiwum(id_galezi) {
  var id_li = "li_" + id_galezi;
  var id_div = "div_" + id_galezi;
  /**/
  document.getElementById(id_div).className = "arch_strzalka_rozwiniete";
  document.getElementById(id_li).style.display = "block";
}
/* --- /rozwiń gałąż archiwum --- */

/* --- wyszukiwarka - wyślij zapytanie --- */
function wyszukiwarka_wyslij_zapytanie() {
  var tyt=document.getElementById("szukaj_w_tytulach").checked;
  var art=document.getElementById("szukaj_w_artykulach").checked;
  var zapytanie=" ";
  if (tyt===true) zapytanie="tyt";
  if (art===true) zapytanie="art";
  if ((tyt===true) && (art===true)) zapytanie="tyt art";
  document.getElementById("p_kat").value=zapytanie;
}
/* --- /wyszukiwarka - wyślij zapytanie --- */
function rozwin_galaz_archiwum(id_galezi){var id_li="li_" + id_galezi;var id_div="div_" + id_galezi;document.getElementById(id_div).className="arch_strzalka_rozwiniete";document.getElementById(id_li).style.display="block";}
function wyszukiwarka_wyslij_zapytanie(){var tyt=document.getElementById("szukaj_w_tytulach").checked;var art=document.getElementById("szukaj_w_artykulach").checked;var zapytanie=" ";if(tyt===true)zapytanie="tyt";if(art===true)zapytanie="art";if((tyt===true)&&(art===true))zapytanie="tyt art";document.getElementById("p_kat").value=zapytanie;}

HTML

<!-- środek ============ -->
<div id="div_srodek">
  <!-- środek środkowy ============ -->
  <div id="div_srodek_srodek">
    <!-- panel tekstowy ============ -->
    <div id="div_panel_tekstowy"><?php include("div_srodek.php"); ?></div>
    <!-- /panel tekstowy ============ -->

    <!-- panel nad-tekstowy ============ -->
    <div id="div_panel_nad_tekstowy"><?php include("div_menu_okruszkowe.php"); ?></div>
    <!-- /panel nad-tekstowy ============ -->    
  </div>
  <!-- /środek środkowy ============ -->

  <!-- środek prawy ============ -->
  <div id="div_srodek_prawy"><?php include("zmienne/div_panel_prawy.php"); ?></div>
  <!-- /środek prawy ============ -->

  <!-- środek lewy ============ -->
  <div id="div_srodek_lewy"><?php include("zmienne/div_panel_lewy.php"); ?></div>
  <!-- /środek lewy ============ -->
</div>
<!-- /środek ============ -->
<div id="div_srodek"><div id="div_srodek_srodek"><div id="div_panel_tekstowy"><?php include("div_srodek.php"); ?></div><div id="div_panel_nad_tekstowy"><?php include("div_menu_okruszkowe.php"); ?></div></div><div id="div_srodek_prawy"><?php include("zmienne/div_panel_prawy.php"); ?></div><div id="div_srodek_lewy"><?php include("zmienne/div_panel_lewy.php"); ?></div></div>

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0