Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > pl.comp.lang.php > #15726 > unrolled thread

importowanie klas wewnątrz CSS

Back to article view | Back to pl.comp.lang.php

Contents

  importowanie klas wewnątrz CSS Freja Draco <frreja@poczta.fm> - 2018-02-17 19:31 +0100
    Re: importowanie klas wewnątrz CSS Borys Pogoreło <borys@pl.edu.leszno> - 2018-02-18 18:37 +0100
    Re: importowanie klas wewnątrz CSS Marek S <precz@spamowi.com> - 2018-02-19 22:20 +0100
      Re: importowanie klas wewnątrz CSS Freja Draco <frreja@poczta.fm> - 2018-02-21 21:49 +0100
        Re: importowanie klas wewnątrz CSS Marek S <precz@spamowi.com> - 2018-02-21 22:09 +0100
          Re: importowanie klas wewnątrz CSS Roman Tyczka <noemail@because.no> - 2018-02-21 23:06 +0100
            Re: importowanie klas wewnątrz CSS Marek S <precz@spamowi.com> - 2018-02-22 16:26 +0100
          Re: importowanie klas wewnątrz CSS Freja Draco <frreja@poczta.fm> - 2018-02-22 14:20 +0100
            Re: importowanie klas wewnątrz CSS Marek S <precz@spamowi.com> - 2018-02-22 16:24 +0100
              Re: importowanie klas wewnątrz CSS Freja Draco <frreja@poczta.fm> - 2018-02-22 20:47 +0100
                Re: importowanie klas wewnątrz CSS Marek S <precz@spamowi.com> - 2018-02-22 21:16 +0100
                  Re: importowanie klas wewnątrz CSS Freja Draco <frreja@poczta.fm> - 2018-02-22 21:49 +0100
                    Re: importowanie klas wewnątrz CSS Roman Tyczka <noemail@because.no> - 2018-02-23 09:08 +0100
                      Re: importowanie klas wewnątrz CSS Freja Draco <frreja@poczta.fm> - 2018-02-23 13:51 +0100
                        Re: importowanie klas wewnątrz CSS Roman Tyczka <noemail@because.no> - 2018-02-23 14:21 +0100
                          Re: importowanie klas wewnątrz CSS Freja Draco <frreja@poczta.fm> - 2018-02-23 15:38 +0100
                        Re: importowanie klas wewnątrz CSS Marek S <precz@spamowi.com> - 2018-02-23 14:35 +0100
                          Re: importowanie klas wewnątrz CSS Freja Draco <frreja@poczta.fm> - 2018-02-23 15:48 +0100
                            Re: importowanie klas wewnątrz CSS Marek S <precz@spamowi.com> - 2018-02-23 16:57 +0100

#15726 — importowanie klas wewnątrz CSS

Nie wiem, jak właściwie nazwać mechanizm, który mi chodzi po głowie i
podejrzewam, że nic takiego nie istnieje, ale spróbuję opisać i może
ktoś, coś zasugeruje.

Otóż chodzi mi o to, żeby stworzyć sobie w HTML obiekt, np:

-----------------------------------
<DIV class="dobra_klasa">
-----------------------------------


A następnie w CSS konstrukcję typu:

-----------------------------------
.klasa_elastyczna {display:flex; [+ zylion linii kodu] }

.klasa_cos { [zylion linii kodu] }

.klasa_costam { [zylion linii kodu] }

.dobra_klasa {
   ZAIMPORTUJ: .klasa_elastyczna;
   ZAIMPORTUJ: .klasa_cos;
   ZAIMPORTUJ: .klasa_costam;
}

-----------------------------------

1) Podejrzewam, że coś podobnego dałoby się zaemulować za pomocą
któregoś z preprocesorów CSS ale chodzi mi nie tyle o uproszczenie
wejściowego kodu, tylko o redukcję rozmiarów CSS-a wysyłanego do
przeglądarki.


2) Wiem, że to samo mogę niby uzyskać przypisując:

<DIV class="klasa_elastyczna klasa_cos klasa_costam">

ale takie rozwiązanie trwale wiąże element z określonymi cechami stylu i
w sumie niewiele różni się od walenia w nim lokalnym style="", a może
będę mieć fantazję, żeby np. w innym projekcie ten sam element strony
nie był już elastyczny i zmiana tego będzie wymagać przeróbki na
poziomie HTML-a a zależałoby mi, żeby to wszystko dało się w ramach
samego CSS ogarnąć.


Niby istnieją var(), ale one przechowują tylko pojedyncze wartości i nie
działają w durnym IE (czyli 3% przeglądaczy).

Jakieś sugestie?

-- 
Freja Draco

Kiedy smok jest w pobliżu, nic nie będzie w stanie ci pomóc,
jeśli nie uwzględnisz go w swoich kalkulacjach.

[toc] | [next] | [standalone]

#15728

Dnia Sat, 17 Feb 2018 19:31:03 +0100, Freja Draco napisał(a):

> Niby istnieją var(), ale one przechowują tylko pojedyncze wartości i nie
> działają w durnym IE (czyli 3% przeglądaczy).
> 
> Jakieś sugestie?

Nie da się. Jedynie SASS lub analogiczne rozwiazania. Ale jeśli Twoim
jedynym zmartwieniem jest wielkość przesyłanych danych, to gzip powinien to
bardzo skutecznie skompresować. Jeśli dbasz również o czas przetwarzania
pliku, to pozostaje tylko składanie reguł bezpośrednio w atrybucie
class="klasa_elastyczna klasa_cos klasa_costam".

-- 
Borys Pogoreło
borys(#)leszno,edu,pl

[toc] | [prev] | [next] | [standalone]

#15729

W dniu 2018-02-17 o 19:31, Freja Draco pisze:

> 1) Podejrzewam, że coś podobnego dałoby się zaemulować za pomocą
> któregoś z preprocesorów CSS ale chodzi mi nie tyle o uproszczenie
> wejściowego kodu, tylko o redukcję rozmiarów CSS-a wysyłanego do
> przeglądarki.

Serwery zwykle by default kompresują pliki CSS. Tekst kompresuje się 
bardzo dobrze więc stosunkowo duży plik staje się całkiem mały. W 
dodatku pliki statyczne nie obciążają za bardzo CPU więc i od tej strony 
jest bezpiecznie. Tak więc tym bym się nie przejmował za bardzo. No 
chyba, ze robisz portal, który ma ogromną liczbę wejść. Jak patrzę po 
portalach to i w nich odchodzi się od takich oszczędności.

> 2) Wiem, że to samo mogę niby uzyskać przypisując:
> 
> <DIV class="klasa_elastyczna klasa_cos klasa_costam">

Tak się właśnie postępuje. Choćby frameworki jak bootstrap lubują się w 
przypisywaniu N klas do jednego elementu.

> ale takie rozwiązanie trwale wiąże element z określonymi cechami stylu i
> w sumie niewiele różni się od walenia w nim lokalnym style="",

Nie do końca masz rację. Jeśli zaincludujesz inny CSS, to te same nazwy 
klas będą inaczej działały.

> a może
> będę mieć fantazję, żeby np. w innym projekcie ten sam element strony
> nie był już elastyczny i zmiana tego będzie wymagać przeróbki na
> poziomie HTML-a a zależałoby mi, żeby to wszystko dało się w ramach
> samego CSS ogarnąć.

No więc załaduj inny wariant CSS.


-- 
Pozdrawiam,
Marek

[toc] | [prev] | [next] | [standalone]

#15732

W dniu 2018-02-19 o 22:20, Marek S pisze:

> Serwery zwykle by default kompresują pliki CSS.

W sumie racja, a jak nie to zawsze można to sobie włączyć :)

Czyli problem z gatunku wydumanych. Dziękuję za odpowiedzi.



>> ale takie rozwiązanie trwale wiąże element z określonymi cechami
>> stylu i w sumie niewiele różni się od walenia w nim lokalnym
>> style="",
>
> Nie do końca masz rację. Jeśli zaincludujesz inny CSS, to te same
> nazwy klas będą inaczej działały.

Niby tak, ale jeśli zechcę później np. usunąć elastyczność elementom
przynależące do "klasa_elastyczna", to zmieniając CSS danej klasy, usunę
ją we wszystkich takich elementach, zatem średnio.

Chyba żeby ją później nadpisać dla wybranego ID czy innej bardziej
szczegółowej klasy, ale to się w efekcie niezbyt czytelne zrobi.

Albo dłubać w samym kodzie HTML, ale po to m.in. wymyślono CSS, żeby nie
musieć tego robić.

-- 
Freja Draco

Kiedy smok jest w pobliżu, nic nie będzie w stanie ci pomóc,
jeśli nie uwzględnisz go w swoich kalkulacjach.

[toc] | [prev] | [next] | [standalone]

#15733

W dniu 2018-02-21 o 21:49, Freja Draco pisze:

> Niby tak, ale jeśli zechcę później np. usunąć elastyczność elementom
> przynależące do "klasa_elastyczna", to zmieniając CSS danej klasy, usunę
> ją we wszystkich takich elementach, zatem średnio.

Czyż nie o to w punkcie 2 Ci chodziło? Jednym prostym includem możesz 
łatwo wyłączyć elastyczność wszystkich elementów z klasą klasa_elastyczna.

> Chyba żeby ją później nadpisać dla wybranego ID czy innej bardziej
> szczegółowej klasy, ale to się w efekcie niezbyt czytelne zrobi.
> 
> Albo dłubać w samym kodzie HTML, ale po to m.in. wymyślono CSS, żeby nie
> musieć tego robić.

No to właśnie dlatego nadpisuj klasy. Jeśli jednak dążysz do tego by 
tworzyć projekty nowych serwisów WWW mając do dyspozycji niezmienny kod 
HTML a grzebiąc wyłącznie w CSS, to raczej się to nie uda :-D

Jakoś nie mogę sobie wyobrazić, że za pomocą zmiany CSS z serwisu typu 
blog na temat hodowanego chomika zrobisz nagle sklep internetowy, 
zintegrowany z Allegro i wystawiający faktury automatycznie :-D

-- 
Pozdrawiam,
Marek

[toc] | [prev] | [next] | [standalone]

#15734

On Wed, 21 Feb 2018 22:09:27 +0100, Marek S wrote:

>> Niby tak, ale jeśli zechcę później np. usunąć elastyczność elementom
>> przynależące do "klasa_elastyczna", to zmieniając CSS danej klasy, usunę
>> ją we wszystkich takich elementach, zatem średnio.
> 
> Czyż nie o to w punkcie 2 Ci chodziło? Jednym prostym includem możesz 
> łatwo wyłączyć elastyczność wszystkich elementów z klasą klasa_elastyczna.

A ja się zastanawiam o ch... chodzi z usuwaniem _elastyczności_ z klasy
definiującej... uwaga... elastyczność? :-)

Wiem, że to przykład, ale czy przypadkiem jego kwintesencja nie zabija idei
jakiej szukasz?

-- 
pozdrawiam
Roman Tyczka

[toc] | [prev] | [next] | [standalone]

#15740

W dniu 2018-02-21 o 23:06, Roman Tyczka pisze:

> A ja się zastanawiam o ch... chodzi z usuwaniem _elastyczności_ z klasy
> definiującej... uwaga... elastyczność? :-)

Ja się domyślam powoli w czym rzecz. Chodzi ogólnie o zmianę prezentacji 
(a więc i zachowania się) dokumentu HTML wskutek jakiś zdarzeń. A czy to 
flex czy nie flex, to kwestia zobrazowania jedynie była.


-- 
Pozdrawiam,
Marek

[toc] | [prev] | [next] | [standalone]

#15736

W dniu 2018-02-21 o 22:09, Marek S pisze:

> Jakoś nie mogę sobie wyobrazić, że za pomocą zmiany CSS z serwisu
> typu blog na temat hodowanego chomika zrobisz nagle sklep
> internetowy, zintegrowany z Allegro i wystawiający faktury
> automatycznie :-D

Tak to może akurat nie, ale powiedzmy, że chcesz mieć możliwość zmiany
sposobu prezentacji zajawek artykułów czy produktów

<div class="zajawka">

w postaci listy albo w postaci kafelków.

możesz:
- dopisać klasę "elastyczna" w divie (grzebanie w HTML)
- albo dopisać, co trzeba w CSS klasy "zajawka"
   co na ten moment wygląda u mnie np: +/- tak:

   display: -ms-flex;              /* IE 10 */
   display: -webkit-box-flex;      /* iOS 6-, Safari 3.1-6 */
   display: -webkit-flex;          /* Chrome, Safari 6.1+ */
   display:flex;

   -ms-flex-wrap:wrap; /* IE 10 */
   -webkit-flex-wrap:wrap; /* Chrome, Safari 6.1+ */
   flex-wrap:wrap;

i pytałam, czy nie da się tego w ramach samego CSS bez preprocesorów
uprościć, żeby nie pisać kilka razy w różnych miejscach.

Ale ok, wszystko już wiem - nie da się :>

-- 
Freja Draco

Kiedy smok jest w pobliżu, nic nie będzie w stanie ci pomóc,
jeśli nie uwzględnisz go w swoich kalkulacjach.

[toc] | [prev] | [next] | [standalone]

#15739

W dniu 2018-02-22 o 14:20, Freja Draco pisze:

> i pytałam, czy nie da się tego w ramach samego CSS bez preprocesorów
> uprościć, żeby nie pisać kilka razy w różnych miejscach.
> 
> Ale ok, wszystko już wiem - nie da się :>

Wiesz, może nie tak. To się da zrobić oczywiście ale Twój sposób jest 
przekombinowany. Popatrz sobie np. na framework Bootstrap czy inne 
siatkowe. Robią one m.in. mniej więcej to, co chcesz uzyskać. Zmieniasz 
rozmiar ekranu i to co było belką menu, staje się menu rozwijanym. 
Wszystko na CSS, bez udziału JS. To są podstawy. Taka właśnie jest idea 
CSS.

Jeżeli istnieje potrzeba bardziej wyszukanych kryteriów zmiany 
prezentacji jakiegoś elementu, to zapewne JS będzie potrzebny. Ale to 
nie oznacza wcale, że fizycznie musi on ingerować w strukturę DOM w 
sekcji BODY. JS może dynamicznie załadować nowy CSS przykrywający 
poprzednika. Niemniej jednak idea tego będzie identyczna do powyżej 
opisanej bo tak to się robi.

-- 
Pozdrawiam,
Marek

[toc] | [prev] | [next] | [standalone]

#15742

W dniu 2018-02-22 o 16:24, Marek S pisze:
> W dniu 2018-02-22 o 14:20, Freja Draco pisze:
>
>> i pytałam, czy nie da się tego w ramach samego CSS bez
>> preprocesorów uprościć, żeby nie pisać kilka razy w różnych
>> miejscach.
>>
>> Ale ok, wszystko już wiem - nie da się :>
>
> Wiesz, może nie tak. To się da zrobić oczywiście ale Twój sposób jest
> przekombinowany. Popatrz sobie np. na framework Bootstrap czy inne
> siatkowe. Robią one m.in. mniej więcej to, co chcesz uzyskać.
> Zmieniasz rozmiar ekranu i to co było belką menu, staje się menu
> rozwijanym. Wszystko na CSS, bez udziału JS. To są podstawy. Taka
> właśnie jest idea CSS.

Ne, ne.

Nie chodziło mi o używanie JS do modyfikacji drzewa obiektów HTML,
czy załadowanych arkuszy stylów, żeby uzyskać w locie zmianę wyglądu
strony. Wiem, że wystarczy użyć np:
media="screen and (max-width: 400px)"
i przypisać sobie arkusz ze stylami dla danej rozdzielczości.

Chodziło, żeby odseparować pliki kodu i pliki konfiguracji/css,
zapewniając przenoszalność kodu pomiędzy różnymi projektami,
a jednocześnie zwięzłość i czytelność.

Ale e... dobra, już nie ważne ;)p
Ogarnę jakiś preprocesor albo napiszę se własny.

-- 
Freja Draco

Kiedy smok jest w pobliżu, nic nie będzie w stanie ci pomóc,
jeśli nie uwzględnisz go w swoich kalkulacjach.

[toc] | [prev] | [next] | [standalone]

#15743

W dniu 2018-02-22 o 20:47, Freja Draco pisze:

> Ale e... dobra, już nie ważne ;)p
> Ogarnę jakiś preprocesor albo napiszę se własny.

Byle żeby nie wyważać otwartych drzwi przy tym wszystkim :-)

-- 
Pozdrawiam,
Marek

[toc] | [prev] | [next] | [standalone]

#15744

W dniu 2018-02-22 o 21:16, Marek S pisze:

> W dniu 2018-02-22 o 20:47, Freja Draco pisze:
>
>> Ale e... dobra, już nie ważne ;)p Ogarnę jakiś preprocesor albo
>> napiszę se własny.
>
> Byle żeby nie wyważać otwartych drzwi przy tym wszystkim :-)

Oj tam. Potrzebuję raptem jednej funkcji.

Dziś po południu machnęłam minifikator css i js i może nie jest tak
mastachowy jak np. ten tutaj:
https://gist.github.com/Rodrigo54/93169db48194d470188f

Ale przynajmniej wiem dokładnie co robi i ogarniam każdą regułę bez
wybuchania mózgu jak np tutaj (to ma podobno usuwać zbędne spacje w CSS):

'#("(?:[^"\\\]++|\\\.)*+"|\'(?:[^\'\\\\]++|\\\.)*+\'|\/\*(?>.*?\*\/))|\s*+;\s*+(})\s*+|\s*+([*$~^|]?+=|[{};,>~+]|\s*+-(?![0-9\.])|!important\b)\s*+|([[(:])\s++|\s++([])])|\s++(:)\s*+(?!(?>[^{}"\']++|"(?:[^"\\\]++|\\\.)*+"|\'(?:[^\'\\\\]++|\\\.)*+\')*+{)|^\s++|\s++\z|(\s)\s+#si',

-- 
Freja Draco

Kiedy smok jest w pobliżu, nic nie będzie w stanie ci pomóc,
jeśli nie uwzględnisz go w swoich kalkulacjach.

[toc] | [prev] | [next] | [standalone]

#15746

On Thu, 22 Feb 2018 21:49:22 +0100, Freja Draco wrote:

>>> Ale e... dobra, już nie ważne ;)p Ogarnę jakiś preprocesor albo
>>> napiszę se własny.
>>
>> Byle żeby nie wyważać otwartych drzwi przy tym wszystkim :-)
> 
> Oj tam. Potrzebuję raptem jednej funkcji.
> 
> Dziś po południu machnęłam minifikator css i js i może nie jest tak
> mastachowy jak np. ten tutaj:
> https://gist.github.com/Rodrigo54/93169db48194d470188f

A ja chciałbym spytać czy to na pewno jest potrzebne? Co na tym _realnie_
zyskasz? Przeglądarki keszują pliki, raz pobrany będzie sobie leżał u
klienta.
Kiedyś jak byłem młody i piękny to sobie wymyślałem nieistniejące problemy,
a potem żmudnie rzeźbiłem ich rozwiązania, których po roku nie rozumiałem,
a kod trzeba było utrzymywać, wyleczyłem się z tego.
Ale mam lekkie wrażenie, że możesz mieć ten sam syndrom ;-)
Reasumując jak rzekł tu i ówdzie znany Donald Knuth:

"Premature optimization is the root of all evil" 

i to się _zazwyczaj_ sprawdza.

-- 
pozdrawiam
Roman Tyczka

[toc] | [prev] | [next] | [standalone]

#15747

W dniu 2018-02-23 o 09:08, Roman Tyczka pisze:

>> Dziś po południu machnęłam minifikator css i js
>
> A ja chciałbym spytać czy to na pewno jest potrzebne? Co na tym
> _realnie_ zyskasz?

Realnie to mi wychodzi spadek o jakieś 30% rozmiaru zzipowanych JS/CSS,
jak się je wcześniej zminifikuje, czyli w sumie jakieś... 4-5 KB,
czyli wychodzi, że możesz mieć trochę rację :p

Możliwe, że wynik uzyskany na:
https://developers.google.com/speed/pagespeed/insights/?hl=pl
daje jakąś premię do pozycji strony w rankingu wyszukiwania, czemu zatem
nie spróbować, skoro mechanizm minifikacji to kilka godzin roboty,
dający system ogólnego zastosowania na różnych stronach.


> "Premature optimization is the root of all evil" i to się _zazwyczaj_
> sprawdza.

Znam to i staram się nad tym panować ;)p

-- 
Freja Draco

Kiedy smok jest w pobliżu, nic nie będzie w stanie ci pomóc,
jeśli nie uwzględnisz go w swoich kalkulacjach.

[toc] | [prev] | [next] | [standalone]

#15748

On Fri, 23 Feb 2018 13:51:15 +0100, Freja Draco wrote:

> W dniu 2018-02-23 o 09:08, Roman Tyczka pisze:
> 
>>> Dziś po południu machnęłam minifikator css i js
>>
>> A ja chciałbym spytać czy to na pewno jest potrzebne? Co na tym
>> _realnie_ zyskasz?
> 
> Realnie to mi wychodzi spadek o jakieś 30% rozmiaru zzipowanych JS/CSS,
> jak się je wcześniej zminifikuje, czyli w sumie jakieś... 4-5 KB,
> czyli wychodzi, że możesz mieć trochę rację :p

Sprawdź ile danych pobiera jedno otwarcie fejsbooka, onetu czy innego
ścierwa. Zdziwisz się ;-)
 
> Możliwe, że wynik uzyskany na:
> https://developers.google.com/speed/pagespeed/insights/?hl=pl
> daje jakąś premię do pozycji strony w rankingu wyszukiwania, czemu zatem

Na ranking kluczowy wpływ ma treść i wartość tej treści, liczona liczbą
linków do niej wskazujących, reszta jest ...pomijalna, delikatnie mówiąc
:-)

-- 
pozdrawiam
Roman Tyczka

[toc] | [prev] | [next] | [standalone]

#15750

W dniu 2018-02-23 o 14:21, Roman Tyczka pisze:

> Sprawdź ile danych pobiera jedno otwarcie fejsbooka, onetu czy
> innego ścierwa. Zdziwisz się ;-)

Pewnie z kilka MB :p

>> Możliwe, że wynik uzyskany na:
>> https://developers.google.com/speed/pagespeed/insights/?hl=pl daje
>> jakąś premię do pozycji strony w rankingu wyszukiwania, czemu
>> zatem
>
> Na ranking kluczowy wpływ ma treść i wartość tej treści, liczona
> liczbą linków do niej wskazujących, reszta jest ...pomijalna,
> delikatnie mówiąc :-)

No nie tylko. Od jakichś 2 lat Gugiel coraz bardziej trąbi, że będzie
także premiować szybkość i dostosowanie strony do urządzeń mobilnych.
A w ogóle to by pewnie najchętniej wszystkich na AMP przeniósł.

-- 
Freja Draco

Kiedy smok jest w pobliżu, nic nie będzie w stanie ci pomóc,
jeśli nie uwzględnisz go w swoich kalkulacjach.

[toc] | [prev] | [next] | [standalone]

#15749

W dniu 2018-02-23 o 13:51, Freja Draco pisze:

> Realnie to mi wychodzi spadek o jakieś 30% rozmiaru zzipowanych JS/CSS,
> jak się je wcześniej zminifikuje, czyli w sumie jakieś... 4-5 KB,
> czyli wychodzi, że możesz mieć trochę rację :p

Ja również z ciekawości spytam: po co w ogóle walczysz o te 4-5kB? 
Robisz portal z milionem dziennych wejść?



-- 
Pozdrawiam,
Marek

[toc] | [prev] | [next] | [standalone]

#15751

W dniu 2018-02-23 o 14:35, Marek S pisze:
> W dniu 2018-02-23 o 13:51, Freja Draco pisze:
>
>> Realnie to mi wychodzi spadek o jakieś 30% rozmiaru zzipowanych
>> JS/CSS, jak się je wcześniej zminifikuje, czyli w sumie jakieś...
>> 4-5 KB, czyli wychodzi, że możesz mieć trochę rację :p
>
> Ja również z ciekawości spytam: po co w ogóle walczysz o te 4-5kB?
> Robisz portal z milionem dziennych wejść?

Zboczenie ;->

-- 
Freja Draco

Kiedy smok jest w pobliżu, nic nie będzie w stanie ci pomóc,
jeśli nie uwzględnisz go w swoich kalkulacjach.

[toc] | [prev] | [next] | [standalone]

#15752

W dniu 2018-02-23 o 15:48, Freja Draco pisze:

> Zboczenie ;->

:-D

-- 
Pozdrawiam,
Marek

[toc] | [prev] | [standalone]

Back to top | Article view | pl.comp.lang.php

csiph-web