Uniwersalny css

Question

Cześć. mam pytanko. Czy istnieje coś takiego jak gotowy uniwersalny zbiór stylii, które możemy wkleić do naszego pliku css? Pytam bo ostatnio chciałem ściągnąć z internetu gotowe szablony i w ramach nauki je skopiować i zauważyłem, że w każdym pliku css tych stronek znajdują się identyczne stylizację dotyczące np. form, table, list, buttons. Mam nadzieję, że wyraziłem się jasno i zrozumiale.
Szablony pobieram z tej strony: http://templated.co/

Możecie pobrać losowe dwa szablony, odpalić plik css i zobaczyć, że są tam "wbudowane" uniwersalne style w każdym z tych szablonów.

Answer 1

Mówisz o resecie/normalizacji stylów. Obecnie są 3 duże projekty, które to robią:

• reset.css – pierwszy tego typu projekt, stworzony przez Erica Meyera; usuwa wszystkie style, przez co konieczne jest restylowanie całej strony
• normalize.css – de facto standard na chwilę obecną; nie usuwa stylów, lecz sprawia, że we wszystkich przeglądarkach są takie same (stąd "normalizacja", a nie "resetowanie")
• sanitize.css – najmłodszy projekt; ustawia "sensowne" style, z zastrzeżeniem, że nie wszystko, co autor tej biblioteki uznaje za sensowne faktycznie takie jest

Osobiście używam normalize.css i dorzucam do tego normalize-opentype.css. Moją normalizację możesz zobaczyć w lekko umarłym projekcie Talib.

Comments

Dodam jeszcze, że właśnie z normalize.css korzysta Bootstrap.

---

Tak, ale bodaj od wersji 2 albo nawet 3 dopiero. Jedynka korzystała z resetu Meyera, zmodyfikowanego przez HTML5Doctor.com. A wiem to stąd, że swego czasu forkowałem Bootstrapa i tworzyłem własny "framework" na jego podstawie ;)

Answer 2

Chodzi tobie o framework CSS.

Np. Bootstrap http://getbootstrap.com/
A tu tutorial https://kursbootstrap.pl/tutorial/

Albo lżejszy i coraz bardziej popularny PureCSS.
http://purecss.io/

Comments

Nie, nie chodzi mi o framework. Zauważyłem, że każda strona ma np wbudowany taki kod:

/* Reset */

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }

    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block;
    }

    body {
        line-height: 1;
    }

    ol, ul {
        list-style: none;
    }

    blockquote, q {
        quotes: none;
    }

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    body {
        -webkit-text-size-adjust: none;
    }

/* Containers */

    .container {
        margin-left: auto;
        margin-right: auto;
    }

    .container.\31 25\25 {
        width: 100%;
        max-width: 100em;
        min-width: 80em;
    }

    .container.\37 5\25 {
        width: 60em;
    }

    .container.\35 0\25 {
        width: 40em;
    }

    .container.\32 5\25 {
        width: 20em;
    }

    .container {
        width: 80em;
    }

    @media screen and (max-width: 1680px) {

        .container.\31 25\25 {
            width: 100%;
            max-width: 100em;
            min-width: 80em;
        }

        .container.\37 5\25 {
            width: 60em;
        }

        .container.\35 0\25 {
            width: 40em;
        }

        .container.\32 5\25 {
            width: 20em;
        }

        .container {
            width: 80em;
        }

    }

    @media screen and (max-width: 1280px) {

        .container.\31 25\25 {
            width: 100%;
            max-width: 81.25em;
            min-width: 65em;
        }

        .container.\37 5\25 {
            width: 48.75em;
        }

        .container.\35 0\25 {
            width: 32.5em;
        }

        .container.\32 5\25 {
            width: 16.25em;
        }

        .container {
            width: 65em;
        }

    }

    @media screen and (max-width: 980px) {

        .container.\31 25\25 {
            width: 100%;
            max-width: 112.5%;
            min-width: 90%;
        }

        .container.\37 5\25 {
            width: 67.5%;
        }

        .container.\35 0\25 {
            width: 45%;
        }

        .container.\32 5\25 {
            width: 22.5%;
        }

        .container {
            width: 90%;
        }

    }

    @media screen and (max-width: 736px) {

        .container.\31 25\25 {
            width: 100%;
            max-width: 112.5%;
            min-width: 90%;
        }

        .container.\37 5\25 {
            width: 67.5%;
        }

        .container.\35 0\25 {
            width: 45%;
        }

        .container.\32 5\25 {
            width: 22.5%;
        }

        .container {
            width: 90%;
        }

    }

    @media screen and (max-width: 480px) {

        .container.\31 25\25 {
            width: 100%;
            max-width: 112.5%;
            min-width: 90%;
        }

        .container.\37 5\25 {
            width: 67.5%;
        }

        .container.\35 0\25 {
            width: 45%;
        }

        .container.\32 5\25 {
            width: 22.5%;
        }

        .container {
            width: 90%;
        }

    }

I takie coś jest jeszcze dla: box model, grid, table, list, basic, type, box, form. Te wbudowane style powtarzają się co strone i mają identyczne value.

---

PureCSS to biblioteka.

Answer 3

Czy nie zastosowanie któregoś z tych 3 rozwiązań to błąd/zła praktyka?

Comments

Złą praktyką jest odkopywanie starego tematu ;)
Najbezpieczniejszy z nich to normalize - jest powszechnie stosowany w projektach.