Podejście html5 do szybkiego prototypowania CSS
lub: <style> tagi nie są już tylko dla głowy!
Hakowanie CSS
Powiedzmy, że debugujesz i chcesz zmodyfikować stronę css, sprawić, by określona sekcja wyglądała tylko lepiej. Zamiast tworzyć swoje style w linii w szybki, brudny i niemożliwy do utrzymania sposób, możesz zrobić to, co robię obecnie i przyjąć podejście etapowe.
Brak wbudowanego atrybutu stylu
Nigdy nie twórz swojego css inline, przez co mam na myśli: <element style='color:red'>lub nawet<img style='float:right'> Jest to bardzo wygodne, ale nie odzwierciedla później rzeczywistej specyfiki selektora w prawdziwym pliku css, a jeśli go zachowasz, będziesz żałować późniejszego obciążenia konserwacyjnego.
Prototyp z <style>zamiast
Tam, gdzie użyłbyś wbudowanego css, zamiast tego użyj <style> elementów na stronie . Wypróbuj to! Działa dobrze we wszystkich przeglądarkach, więc świetnie nadaje się do testowania, ale pozwala z wdziękiem przenosić takie css do globalnych plików css, kiedy tylko chcesz / potrzebujesz! (* pamiętaj tylko, że selektory będą miały specyficzność tylko na poziomie strony, a nie na poziomie witryny, więc uważaj, aby nie były zbyt ogólne) Tak samo czyste, jak w plikach css:
<style>
.avatar-image{
float:right
}
.faq .warning{
color:crimson;
}
p{
border-left:thin medium blue;
// this general of a selector would be very bad, though.
// so be aware of what'll happen to general selectors if they go
// global
}
</style>
Refaktoryzacja inline css innych osób
Czasami nawet nie jesteś problemem, a masz do czynienia z wbudowanym css innej osoby i musisz go refaktoryzować. To kolejne świetne zastosowanie dla<style> in, dzięki czemu możesz bezpośrednio usunąć wbudowany css i natychmiast umieścić go bezpośrednio na stronie w klasach lub identyfikatorach lub selektorach podczas refaktoryzacji. Jeśli jesteś wystarczająco ostrożny ze swoimi selektorami, możesz przenieść wynik końcowy do globalnego pliku css na końcu za pomocą kopiowania i wklejania.
Trochę trudno jest natychmiast przenieść każdy kawałek css do globalnego pliku css, ale dzięki <style>elementom na stronie mamy teraz alternatywy.