Przejdź do głównej treści

10 CSS sztuczki, aby poprawić przepływ pracy

Divi: najłatwiejszy w użyciu motyw WordPress

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

Pisanie CSS nie jest łatwe, ponieważ jeśli nie jesteś ostrożny, możesz pisać zagracony kod, być powolnym i zająć ogromną ilość czasu debugowania kodu podczas pisania kodu.

Przejdźmy od razu do rzeczy: w tym samouczku zebrałem kilka wskazówek, których możesz użyć, aby poprawić swoją wydajność podczas pisania kodu CSS. Możesz je wdrożyć w dowolnym momencie na starych lub nowych projektach.

Będziemy badać w szczególności:

1. Zbiór właściwości

Jeśli okaże się, że te same właściwości zostały zapisane więcej niż raz, sprawdź, czy nie możesz ich skrócić, usuwając niepotrzebne klasy i identyfikatory. Następnie dodaj wszystkie typowe właściwości w pojedynczym nawiasie klamrowym.

Jeśli możesz połączyć swoje sekcje, będziesz mógł stworzyć plik, który będzie wydajniejszy w działaniu i będzie znacznie szybszy.

2. Użyj hasła dla stałych

Niefortunnym ograniczeniem CSS jest to, że nie można definiować stałych, jak w PHP. Stałe to terminy, które można zdefiniować raz, które są używane przez resztę skryptu, niezależnie od zakresu kodu i inkluzji.

Możesz przestać wielokrotnie tworzyć wiele stylów, aby wybrać typ, który zdefiniujesz jako blok projektowy. Ponieważ CSS nie został stworzony do programowania Twojej witryny, pozwoli ci działać tylko jako projektant wnętrz, że tak powiem, nie ma możliwości obsługi stałych.

Mimo to jest to coś, co byłoby naprawdę pomocne, zwłaszcza w przypadku, gdy połączenie Twoich nieruchomości nie wykona całej pracy za Ciebie.

Możesz utworzyć identyfikator zawierający wszystkie potrzebne style. Kiedy naprawdę potrzebujesz go użyć, po prostu dodaj selektory potrzebne do deklaracji. Dzięki temu znacznie szybciej napiszesz swój kod CSS.

3. Komentarz stałej

Oczywiście CSS nie obsługuje stałych, ale to nie znaczy, że nadal nie możesz napisać odniesienia do tego, co w innym przypadku byłoby stałymi. Dlaczego nie wymienić popularnych stylów w komentarzu wielowierszowym?

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 901.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

To Ty będziesz decydować, jak wpisać te komentarze, ale możesz stworzyć rodzaj tabeli materiału podobnej do tej:

/ * Css 'Stałe' * * Tło: #ccc9c9 * Głęboka szary tekst: * #3a3838 tło szczęśliwy ręka #e7e7e7 * * /

Jest to dla mnie szczególnie przydatne, ponieważ nie zawsze jest mi łatwo szybko zorientować się, jakie są szczegóły funkcjonalne bloku kodu (stała). Posiadanie wywołania zwrotnego w pobliżu pomaga przyspieszyć proces kodowania, ponieważ dokładnie wiesz, gdzie szukać i nie będziesz musiał przeszukiwać góry CSS, aby znaleźć punkt, w którym odniosłeś się do określonego stylu.

4. Zgrupowane selektory

Dlaczego na tym poprzestać? A skoro już o tym mowa, dlaczego nie zgrupować razem wielu selektorów, które można połączyć? Pozwoli ci to zaoszczędzić kłopotów związanych z kilkakrotnym pisaniem tego samego stylu:

h1, h2, h3, h4, p {padding: 1 em; rodzina czcionek: "Times New Roman", czas, szeryf; } .navigation ul, .navigation li {padding-top: 0,5 em; }

Chociaż może to nie działać we wszystkich przypadkach, a powyższy przykład z pewnością nie będzie dotyczył twoich konkretnych potrzeb, może służyć jako przypomnienie, gdy następnym razem będziesz kodować i będziesz potrzebować zaoszczędzić czas. iw kosmosie.

5. Użyj preprocesora

Preprocesor CSS to rozszerzenie zwykłego języka CSS, które pomaga szybciej kodować, jednocześnie dodając wiele innych funkcji, których normalnie nie byłbyś w stanie tak łatwo dodać.

Najpopularniejszymi preprocesorami CSS w WordPress są SASS i LESS oraz możesz nauczyć się korzystać z obu.

Preprocesory CSS znacznie ułatwiają pracę i normalne jest, aby zobaczyć, jak bardzo programiści są do nich przywiązani, gdy już to zrozumieją.

6. Pseudoklasy

Jak wyjaśnia specjalista CSS Eric Meyer,  lista stylów linków w określonej kolejności to ważny. W przeciwnym razie możesz skończyć ze stylizowanymi linkami, które nie działają zgodnie z oczekiwaniami.

Możesz temu zaradzić i zaoszczędzić czas, nie musząc rozwiązywać tego rodzaju problemów w przyszłości, wykonując prostą kolejność dla pseudoklas odnośników. Możesz zapamiętać to zamówienie z następującym urządzeniem:

a: link {declaration} a: visited {declaration} a: hover {declaration} a: active {instrukcja}

styl nieodwiedzonych linków jest ustawiany jako pierwszy, a następnie odwiedzany, po najechaniu kursorem myszy i aktywnych linków. Prawdę mówiąc, kolejność nie ma znaczenia, celem jest, abyś mógł zapamiętać tę kombinację tak prosto, jak to tylko możliwe. Porządek ten nazywany jest pseudoklasami „LoVe / HAte” ze względu na litery używane w pseudoklasach.

Niestety, nie obejmuje to pseudoklasy „focus”, chociaż można by ją uznać za pseudoklasę „aktywną”. Istnieje również wyrażenie mnemoniczne, które zawiera tę pseudoklasę, jaką jest " LoVe Hurts Fade Poza domem ”:

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

a: link {declaration} a: visited {declaration} a: hover {statement} a: focus {polecenie} a: aktywny {instrukcja}

7. Użyj skrótu CSS

Jeśli chcesz kodować szybko i wydajnie, ale bez bardziej stromej krzywej uczenia się za pomocą preprocesora, możesz kodować skrótem CSS. Zasady są dużo łatwiejsze do nauczenia, co ułatwi ci korzystanie z nich.

Dzięki skrótowi CSS możesz skondensować wiele wierszy w jedną, bez utraty funkcjonalności. Na przykład poniżej zobaczysz 3 linie, które odnoszą się do obramowania elementu:

#maintain {border-width: 1px; border-style: solid; kolor obramowania: czarny; }

Ta linia może być znacznie prostsza:

#maintain {border: 1px solid black; }

8. Używać skrótów dla obrazów

Skróty CSS nie zawsze są dla Ciebie najlepszym rozwiązaniem, ale możesz zastosować tę zasadę podczas pracy z kolorami.

Zamiast używać 6-cyfrowego kodu szesnastkowego, możesz użyć tylko 3 cyfr.

#ffffff = #fff #1144bb = #14b #ffcc44 = #fc4

Innymi słowy, jeśli zauważysz, że kod koloru ma pary (pierwsza i druga wartość, trzecia i czwarta oraz dwie ostatnie wartości), gdzie każda para ma ten sam znak. możesz pominąć dowolny z tych znaków dla każdej pary.

Przyzwyczajenie się do tego zajmie trochę czasu, ale poświęcenie będzie tego warte. Jeśli inne formy skrótów nie są powszechne, nie musisz się tutaj martwić, ponieważ skróty kolorystyczne są prawie wszystkim znane.

9. Linki nie wymagają cytowania i spacji

Po dodaniu identyfikatora URI do arkusza stylów zwykły i poprawny format obejmuje pojedyncze i podwójne spacje oraz znaki cudzysłowu, jak w tym przykładzie:

ciało {
background-image: url („Http://www.example.com/deepgray-pattern.png”);
}

Po „url (” znajduje się spacja, cudzysłowy i spacja zamykająca, które w rzeczywistości są opcjonalne.

Aby zaoszczędzić trochę więcej czasu i miejsca, ten sam wiersz można zapisać w ten sposób:

ciało {
background-image: url (Http://www.example.com/deepgray-pattern.png);
}

Zauważysz, że spacja i cytaty nie są tak naprawdę potrzebne.

10. Analizowanie CSS

Ważne jest, aby przeanalizować arkusz stylów po zakończeniu, aby upewnić się, że jest tak czysty i lekki, jak to tylko możliwe. Może to być bolesne, ale co ważniejsze, osiągnięcie tego może zająć dużo czasu.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Na szczęście istnieją darmowe narzędzia, takie jak Analiza CSS, CSS Dig et CSS Szarpie. Wszystko, co musisz zrobić, to wpisać kod, wybrać kilka opcji i kliknąć przycisk, aby natychmiast uzyskać raport dotyczący kodu CSS.

CSS Lint jest jeszcze ostrzejszy i może zranić twoją wrażliwość w imię postępu, pomagając ci poprawić umiejętności kodowania.

Tak czy inaczej, są to wszystkie łatwe dostępne opcje, które pomogą Ci uprościć analizę arkusza stylów, aby upewnić się, że jest tak święty, jak to tylko możliwe.

To tyle, jeśli chodzi o te wskazówki, których możesz użyć w różnych projektach CSS. Nie wahaj się i przekaż nam swoich wskazówek.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
13 akcji
udział12
ćwierkanie
Enregistrer1