20 Lis 2019

Jak usunąć nadmiarowy css, tailwindcss, purgecss oraz postcss

Każdy wie, że największą bolączką obecnych stron jest nadmiarowość wszelakiego kodu. Często same style dochodzą do 1MB a gdzie reszta, DOM, obrazki, skrypty, analityka google, reklamy?

Do tego wszystkie te pliki css, js itd. ładowane są za jednym razem. Jednym słowem MASAKRA!

Większość z nas aby przyspieszyć sobie pracę korzysta z css frameworków. Czy to będzie bootstrap, semantic ui, materialize css, fundation i mógłbym jeszcze tak wymieniać i wymieniać. Najlepiej sami zobaczcie ile tego jest – awesome-css-frameworks, ale czy na pewno potrzebny nam jest cały kod np. takiego bootstrapa, no raczej nie?

Frameworki te mają też jedną poważną wadę, przynajmniej dla mnie, składają się z komponentów które jeżeli chcemy zmodyfikować to musimy nieźle się nagimnastykować z !important. Wszystko trzeba nadpisywać!.

A może by tak użyć frameworka, który nie będzie posiadał komponentów ale czyste style. Wiąże się to oczywiście z pisaniem wszystkie we własnym zakresie, ale tak możemy użyć Tailwindcss, poniżej informacja ze strony czym dokładnie jest ten framework.

9 Lip 2010

Ustawienie kolejności warstw za pomocą z-index

<html>
<head>
  <style>
    .rel {
      height: 20px;
      position: relative;
      background: #CCFFFF;
    }

    .dymek {
      left: 10px;
      position: absolute;
      background: #FFFFCC;
      font: normal 12px Arial, Verdana, Tahoma, Helvetica, sans-serif;
      padding: 5px;
      border: #CCCCCC 1px solid;
      width: 150px;
    }

    #rd1 {
      z-index: 13;
    }

    #rd2 {
      z-index: 12;
    }

    #rd3 {
      z-index: 11;
    }

    #rd4 {
      z-index: 10;
    }
  </style>
</head>

<body>
  <div id="rd1" class="rel">
    <div id="d1" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div>
  </div>
  <div id="rd2" class="rel">
    <div id="d2" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div>
  </div>
  <div id="rd3" class="rel">
    <div id="d3" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div>
  </div>
  <div id="rd4" class="rel">
    <div id="d4" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div>
  </div>
</body>

</html>
2 Mar 2009

Prosty zestaw styli do formularzy

body {background:white;line-height:17px;font-size:12px;font-family:tahoma, arial, helvetica, sans-serif;}
form  { padding: 0px; margin: 0px; display: inline; }
input { cursor: hand; }
.lista td { border-bottom: 1px solid #EDEDED; }
.lista td { padding-left: 10px; padding-right: 10px; }
.lista td .button { text-align: center; }