Подход html5 к быстрому прототипированию CSS
или: <style>теги больше не только для головы!
Взлом CSS
Допустим, вы отлаживаете и хотите изменить страницу-CSS, чтобы определенный раздел только выглядел лучше. Вместо того, чтобы создавать свои стили быстро, грязно и неприемлемо, вы можете делать то, что я делаю в эти дни, и применять поэтапный подход.
Нет встроенного атрибута стиля
Никогда не создавайте свой встроенный CSS, под которым я подразумеваю: <element style='color:red'>или даже <img style='float:right'>это очень удобно, но не отражает фактическую специфичность селектора в реальном файле CSS позже, и если вы сохраните его, вы пожалеете о нагрузке на обслуживание позже.
Прототип с <style>вместо
Там, где вы бы использовали встроенный CSS, вместо этого используйте <style> элементы на странице . Попробуйте это! Он отлично работает во всех браузерах, поэтому отлично подходит для тестирования, но позволяет вам изящно перемещать такие CSS-файлы в ваши глобальные CSS-файлы, когда вы захотите / нуждаетесь в этом! (* просто знайте, что селекторы будут иметь только специфичность на уровне страницы, а не специфичность на уровне сайта, так что будьте осторожны, чтобы быть слишком общими) Так же чисто, как в ваших файлах 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>
Рефакторинг чужих встроенных css
Иногда вы даже не проблема, и вы имеете дело с чужим встроенным css, и вам нужно его реорганизовать. Это еще одно отличное использование для <style>страницы in, так что вы можете сразу удалить встроенный CSS и сразу же поместить его прямо на страницу в классах, идентификаторах или селекторах во время рефакторинга. Если вы достаточно осторожны со своими селекторами, вы можете переместить окончательный результат в глобальный CSS-файл в конце, просто скопировав и вставив.
Немного сложно перенести каждый бит css немедленно в глобальный файл css, но с <style>элементами на странице у нас теперь есть альтернативы.