вПолезное

35 полезных советов для создания CSS файла

35 полезных советов для создания CSS файлаПолезных и хороших советов, на которые мы опираемся во время программирования, никогда не бывает много. Некоторые полезные советы собраны в таблицы, некоторые просто где-то выписаны на тетрадке, они нам не позволяют забыть проверить эффективность и правильность наших решений или помогают не забыть создать какой-то кусок кода очень быстро. В этой статье собраны 100 полезных советов при создании css файлов, наверняка многие из них вам знакомы, но как известно повторение — мать учения, также  мы надеемся что вы найдёте для себя что-то новенькое.

1. Перед вами всегда должна быть таблица со всеми свойствами тех или иных CSS компонентов.

2. Используйте хороший редактор, конечно любой css файл можно создать в текстовике, но как будет удобно создавать его в редакторе, который будет вам помогать. Для таких целей подходит не только Dreamweaver CS, но и также Notepad++ или Coda.

3. Эксперименты — вот основа опыта. Читайте статьи профессиональных дизайнеров, а также изучайте уроки, вы точно подчерпнёте для себя что-то полезное.

4. Включите компрессию Gzip на стороне сервера где это только возможно.

5. Не забывайте про кэш, который увеличит скорость загрузки вашего сайта.

6. Используйте пробелы, т.к. они увеличивает читабельность, хотя с другой стороны они и увеличивают размер.

7. Избегайте встроенного кода.

8. При использовании любого кода вы должны точно знать что он делает и какие затраты системы он приносит.

9. Не забывайте комментировать ваши шаги, конечно же  не все,только основополагающие.

10. Как советует «Руководство по улучшения скорости загрузки страниц от Google» используйте один файл css, т.к. он уменьшит количество HTTP запросов .

11. Помните правило иерархии: правила, которые описаны ниже в файле заменять правила, которые описаны выше, в случае если они являются конфликтующими.

12. Если у вас возникла ошибка со стилями и вы никак не можете разобраться где произошла ошибка, вы можете отключить действие стилей при помощи Firebug, Web Developer add-on или простого комментирования. По шагово проверяйте работу css стилей.

13. Будьте уверены, что ваш код правильно работает во всех браузерах.

14. Также проверьте как будет вести себя код когда размер браузерного окна будет уменьшаться или увеличиваться.

15.  Каждый браузер имеет встроенный дебаггер. Его можно вызвать в IE и Firefox при помощи клавиши F12, для Chrome, Safari и Opera нажмите  Ctrl + Shift + I

16. Эмулятор браузера не может создавать реальные вещи.

17. PHP код может создавать динамический CSS файл.

18. Называйте файл понятными словами, к примеру page.css , styles.css или header.css

19. Создавайте свои сниппеты для css файлов, они сэкономят вам очень много времени.

20.  Не злоупотребляйте вставкой комментариев.

21. Если вы не помните какие именно свойства появились в css3 всегда имейте под рукой cheat sheets.

22. Проверяйте своё код на валидацию W3C CSS Validation Service.

23. Храните различные css файлы в одной директории.

24. Будьте аккуратными в использовании атрибутов media.

25. Пишите компактный код, если один и тот же элемент имеет несколько свойств, перечислите их через запятую.

26. При работе с событиями для мыши описывайте их в следующем порядке: (1) :link псевдо класс, (2) :visited, (3) :hover и последним (4) :active

27. Не забывайте про специфику Apple iOS.

28. Делайте родительские элементы более подробными, чтобе дочерние смогли унаследовать больше свойств и не пришлось дописывать по сто раз одно и тоже.

29. Вы можете применять различные классы к одному элементу при помощи запятой.

30. Не забывайте про специфические селекторы, которые позволят вам работать с мылом или скайпом, к примеру [href^="skype:"].

31. Псевдо классы :target и :checked имеют большой потенциал.

32. Воспользуйтесь новыми псевдо элементами ::before или ::after

33. Идентификаторы могут играть двойную роль.

34. Тэг <meta name="viewport"> можно использовать для того чтобы установить размер браузерного окна на 100% в Apple iOS.

35. Селектор (*) лучше всего избегать, т.к. он может внести дисгармонию в ваш css файл.

Автор:

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *