Краткие советы по CSS

Каковы некоторые хорошие методы кодирования, позволяющие сохранить лаконичность кода CSS, чтобы код CSS был эффективным и экономил ваше время.

Не могли бы вы поделиться советами, которые вы почерпнули на этом пути, и извлеченными уроками? По дороге я подобрал кое-какие вещи.

• Использование стилей для вещей, требующих определенного форматирования на больших веб-сайтах, а не индивидуальное нацеливание на элементы, что приведет к созданию длинного повторяющегося кода.
  
• Группировка элементов, находящихся в одном разделе, чтобы не вводить одни и те же свойства снова и снова.
  

Например:

 #about-us{


}


/*Rather than*/


#about us .title{


text-align:center;


letter-spacing: 1px;


line-height: 145%;


}


#about-us .text{


text-align:center;


letter-spacing: 1px;


line-height: 145%;


}


/* REPEATED STYLES LIKE THIS*/


#about us .title,


#about-us .text {


text-align:center;


letter-spacing: 1px;


line-height: 145%;


}

Код (CSS): Заранее спасибо! С уважением, Крис

@deathshadow какой метод вы используете (или считаете лучшим) для очистки плавающих элементов? Что вы думаете о flexbox и (новой) CSS-сетке? Могу ли я использовать flexbox с прогрессивным улучшением? ... например, сначала разработать базовый макет с помощью «плавающих и ясных» методов.

CSS-сетка — это «макет в первую очередь», так что я думаю, вы против этого?

Я только возвращаюсь к программированию и думаю, что многое забыл.

Я изучил основы флексбокса раньше, когда он был еще новым, но сейчас я едва могу вспомнить, как все это работает.

На самом деле это ничем не отличается от разметки для макета с плавающей запятой, и он полностью поддерживает макеты с 1, 2 и 3 столбцами в любом порядке, при этом формы поиска и контакта являются модальными диалоговыми окнами, а меню может быть «гамбургером» или нет.

, и все это без необходимости использования одной строки JavaScript.



Я мог бы рассмотреть возможность добавления одного или двух дополнительных DIV для исправления проблемы с двойной полосой прокрутки модальных окон, когда экран действительно крошечный, а также несколько других исправлений угловых случаев, но по большей части с использованием flex, сеток или даже плавающих элементов их практически нет, если вообще есть.



разница в разметке.

это означает, что это, конечно, НЕ «макет в первую очередь», при любом воображении.

Так что я действительно не уверен, откуда вы взяли, что это было.

На самом деле во время некоторого простоя я переписываю одну из своих личных страниц, в которой используется, ну... черт возьми, почти та же самая разметка, только с гибкой, а не сеткой, о чем я НЕ СОВЕРШЕННО готов рассказать пользователям IE11. поцеловать мою крупу.

IE (все версии) составляет около 8% и, согласно большинству статистических данных, снижается, но это во всем мире.

В США эта цифра ШОКАЗАТЕЛЬНО выше, но это вряд ли является шоком, учитывая, что средний американец в наши дни по сути является не чем иным, как луддитами.

Такое ощущение, что как минимум половина этой проклятой страны мечтает вернуться в средневековье.

Как правило, я не люблю использовать * и делаю это только для реальных исправлений ошибок, таких как устаревшие мобильные устройства, которые не знают, что делать с META области просмотра.

Моя самая большая проблема с сбросом этого значения заключается в том, что это НЕ значение, несовместимое между браузерами, поскольку правильная блочная модель CSS единообразна вплоть до IE6, пока у вас есть объявление DOCTYPE.

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

... и если вы не заметили, то о "фреймворках" у меня болезненно низкого мнения. Я слышу слово «я съеживаюсь» и начинаю искать дверь.



Более того, многие из тех, кто выступает за это, являются теми же клоунами, которые потратили два десятилетия, жалуясь на «сломанную» блочную модель IE... то, что было проблемой ТОЛЬКО если вы опустили DOCTYPE или в IE5. x - тем не менее, вы ВСЕ ЕЩЕ слышали, как люди говорят «сломанная» или «глупая» блочная модель в отношении поведения «режима причуд» IE... ТОЧНО ТАКОЕ ЖЕ ПОВЕДЕНИЕ, что и box-sizingorder-box;. Если он такой сломанный и плохой, почему они спотыкаются о собственные ноги в безумной спешке швырять его во все подряд? Он также добавляет больше правил, которые необходимо проверять ВСЕМ, это может отрицательно повлиять на время рендеринга.

Это часто забавно, поскольку люди, которые выступают за подобные вещи, - это те, кто говорит что-то вроде «переместите свой первоначальный стиль в разметку в теге

Я только что посмотрел на них, и никаких существенных изменений я там не внес.

HTML-файл просто теряет «.0» из начального масштаба, и я загрузил текущий экран «Отправная точка», который использую, и там тоже нет серьезных изменений. Это то, с чего я начинаю для большинства сайтов.

На самом деле, я начинаю с гораздо меньшего количества, так как внутри нет НИЧЕГО, что было бы заранее определено.

Когда я работаю, начинается пустым.