Кто как CSS пишет?

sigma77 · January 4, 2011

Имхо, сокращения - сила

Сокращениями тоже нужно уметь пользоваться. А то можно потом долго удивляться почему всё выглядит не так как хотелось бы.

Простой пример:

h1 {
	font: 12px Arial, sans-serif;
}

<h1>Lorem ipsum dolor sit amet consectetuer sit enim Cras est sociis</h1>

или

div {
	border: 3px solid silver;
	border-bottom: red;
}

Edited January 4, 2011 by sigma77

Coder_D · January 5, 2011

На начальной стадии всё сливаю в один файл.

На стадии отладки и дооформления разделяю CSS на несколько файлов, например (menu.css - все правила для меню, decor.css - всё, что касается оформления, цвета, ссылки абзацы и тд., style.css - общие правила для блоков, позиционирование, размеры и тд.)

Это позволяет быстро найти необходимую строку и править, что надо, без необходимости вечно листать скролл и напряженно всматриваться в строки, чтобы не пропустить нужную. Минусов не заметил. На авторство не претендую, но для себя это открытие сделал сам.

Еще интересный момент, кто как произносит? ЦеЭсЭс или КэЭсЭс

Shift-Web · January 5, 2011

Сокращениями тоже нужно уметь пользоваться. А то можно потом долго удивляться почему всё выглядит не так как хотелось бы.
Простой пример:
h1 {
	font: 12px Arial, sans-serif;
}

<h1>Lorem ipsum dolor sit amet consectetuer sit enim Cras est sociis</h1>
или
div {
	border: 3px solid silver;
	border-bottom: red;
}

А вот ни к чему по 500 шрифтов использовать В сокращениях так не пишется, тут уж дело техники. Можно разброс задать в начале, а жальше по сокращёнке кастомизировать отдельные места. Тем более font-face теперь будет работать как надо.

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

@Coder_D? СиЭсЭс. Си как Ц в английском только в ряде случаев(например Celtic, Cell, Centrain и т.д.).

Edited January 5, 2011 by Shift-Web

Vlad · January 5, 2011

Сделал небольшой обзор minify, может заинтересует кого и станет использовать. Если кратко - то сжимает CSS-файлы.

http://htmlbook.ru/blog/biblioteka-minify

sigma77 · January 5, 2011

А вот ни к чему по 500 шрифтов использовать
А причем тут 500 шрифтов?

Shift-Web · January 5, 2011

Сделал небольшой обзор minify, может заинтересует кого и станет использовать. Если кратко - то сжимает CSS-файлы.
http://htmlbook.ru/blog/biblioteka-minify

Надо посмотреть. А как с тайди? Что-то подобное?

Coder_D · January 5, 2011

Shift-Web

Ну как это правильно читается я знаю

А я вот произношу КСС и меня это нисколько не обламывает.

Есть знакомые верстальщики (со стажем) те напротив, произносят ЦСС и тоже, на сколько я знаю, не обламываются.

Вы еще предложите произносить это всё с американским акцентом. :angry:

Shift-Web · January 5, 2011

Coder-D, ну логично же ))) Из-за акцента все Ка-кают и Цэ-кают потому что Си-кать не прикольно )))))

alanvanduke · January 5, 2011

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

Мишка, поддерживаю твой способ написания ксс файлов. Вполне оправдано практикой.

Ко всем: разве вы не используете автоматическое сжатие ксс файла? Т.е. После правки файла его тайм модифиед изменяется и по этому признаку можно сформировать сжатуюверсию ксс файла используя простой класс для сжатия которых не мало. Не пойму зачем вообще этим заниматьс на уровне свн.

Существует большое колво методик от зарубежых специалистов. Откройте на ктайняк какой ни будь обширный проект и посмоьрите как там написаны стили. У них то это обусловлено практикой, а у вас чем?

Shift-Web · January 5, 2011

Нон стоп, разве порядок в ксс вообще не играет рт какого значения? Я чувствую что при таком подходе и появляется необходимость использовать импортант.
Мишка, поддерживаю твой способ написания ксс файлов. Вполне оправдано практикой.
Ко всем: разве вы не используете автоматическое сжатие ксс файла? Т.е. После правки файла его тайм модифиед изменяется и по этому признаку можно сформировать сжатуюверсию ксс файла используя простой класс для сжатия которых не мало. Не пойму зачем вообще этим заниматьс на уровне свн.
Существует большое колво методик от зарубежых специалистов. Откройте на ктайняк какой ни будь обширный проект и посмоьрите как там написаны стили. У них то это обусловлено практикой, а у вас чем?

А вот почему все тыкают западом? Мы что хуже или панацея? Спору нет, есть хорошие решения, но как бы тоже есть такой момент как покупной макет, который в принципе проточен и оптимизирован, и с этой вёрсткой геморой при посадке, как ни крути. Если есть потенциал тго, что придётся править, то наверное у каждого свой стиль вырабатывается.

Тайм модифиед например в опере и мозилле да и в ие пока с ноги не пнёшь ф5 - нифига не обновитсяю Имхо, гораздо удобнее использовать хвостой запрос, который при изменениях меняется bla-bla.css?DSNfbvqya. Работает как смена имени файла -- поэтому надёжнее

alanvanduke · January 5, 2011

Почему тыкают западом? Мы не хуже, я не спорю, может какие то вещи у нас и создаются, но множество новой информации поступает именно из зарубежа...

Хорошо, покупной макет. Давайте рассмотрим предложенные варианты.

Запись в строчку - попробуйте отыскать и изменить необходимое CSS св-во. Это становиться очень трудной задачей.

Запись каскадом, или с учетом вложенности - опять таки - добавление нового класса занимает больше времени, чем обычно - необходимо анализировать вложенность и подчиненность.

Для меня оптимальный способ:

/*
	 header
*/
#header {

}

.header-link {

}

#header-toolbar {

}




/*
	 middler
*/
#middler {

}



/*
	 sidebar
*/
#sidebar {

}

#sidebar a {

}

Т.е. Я избегаю конструкций #id .class1 .class2 .class3, потому что в таких случаях затрачивается дополнительные ресурсы на поиск подчененных эл.ов.

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

Про версии CSS-файлов.

Делается это просто. В пректе можно легко ввести константу, например DEBUG_MODE, в случае если она true мы используем прямую ссылку на полный CSS-файл без сжатия и оптимизаций. После перевода проекта в, как стало модно называть, продакшн-версию, можно использовать специальный файл, напрмер css-optimizator.php, а в .htaccess файле добавляем условие чтобы все редиректы, имеющие вид mycss-{$FILE_TIMESTAMP}.css перенаправлялись в этот файл. В свою очередь данный файл автоматически оптимизирует и выдает последнюю оптимизированную версию требуемого CSS файла. Настроить кэширование браузера можно в заголовках, возвращаемых файлом css-optimizator.php.

Жалко потерял ссылку на объемный документ, где очень подробно описаны способы оптимизации, как на стороне сервер, так и на стороне клиента. Если найду - обязательно поделюсь. Документ старый, но написан фундаментально.

А так же в процессе был найден полезный ресурс по оптимизации CSS для ускорения рендиринга страниц (сейчас сам читаю): http://vremenno.net/html-css/optimize-css-...wser-rendering/

Да и если просто задать гуглу вопрос можно узнать много интересного.

И на последок.

Shift-Web · January 6, 2011

Почему тыкают западом? Мы не хуже, я не спорю, может какие то вещи у нас и создаются, но множество новой информации поступает именно из зарубежа...
Хорошо, покупной макет. Давайте рассмотрим предложенные варианты.
Запись в строчку - попробуйте отыскать и изменить необходимое CSS св-во. Это становиться очень трудной задачей.
Запись каскадом, или с учетом вложенности - опять таки - добавление нового класса занимает больше времени, чем обычно - необходимо анализировать вложенность и подчиненность.
Для меня оптимальный способ:
/*
	 header
*/
#header {

}

.header-link {

}

#header-toolbar {

}




/*
	 middler
*/
#middler {

}



/*
	 sidebar
*/
#sidebar {

}

#sidebar a {

}
Т.е. Я избегаю конструкций #id .class1 .class2 .class3, потому что в таких случаях затрачивается дополнительные ресурсы на поиск подчененных эл.ов.
Если честно, то я методик не читал, но после прочтения темы погуглил и собираюсь изучить парочку и вывести плюсы и минусы. В своем подходе я опираюсь исключительно на собственный опыт, и был бы рад, если бы кто ни будь прокомментировал мой подход.
Про версии CSS-файлов.
Делается это просто. В пректе можно легко ввести константу, например DEBUG_MODE, в случае если она true мы используем прямую ссылку на полный CSS-файл без сжатия и оптимизаций. После перевода проекта в, как стало модно называть, продакшн-версию, можно использовать специальный файл, напрмер css-optimizator.php, а в .htaccess файле добавляем условие чтобы все редиректы, имеющие вид mycss-{$FILE_TIMESTAMP}.css перенаправлялись в этот файл. В свою очередь данный файл автоматически оптимизирует и выдает последнюю оптимизированную версию требуемого CSS файла. Настроить кэширование браузера можно в заголовках, возвращаемых файлом css-optimizator.php.
Жалко потерял ссылку на объемный документ, где очень подробно описаны способы оптимизации, как на стороне сервер, так и на стороне клиента. Если найду - обязательно поделюсь. Документ старый, но написан фундаментально.
А так же в процессе был найден полезный ресурс по оптимизации CSS для ускорения рендиринга страниц (сейчас сам читаю): http://vremenno.net/html-css/optimize-css-...wser-rendering/
Да и если просто задать гуглу вопрос можно узнать много интересного.
И на последок.

А вы файрбагом пользуетесь или чем-то подобным? Может просто у вас инструмент неудобный?

#id .class1 .class2 .class3 -- такие вещи очень удобны на самом деле, если вёрстка ваша, то как бы просто положено еще в процессе знать какой элемент во что вложен и какие свойства где заданы(стараюсь держать в голове). Ну и при посадке на некоторые специфичные движки вы этими приблудами сэкономите себе нервы и килобайты кода.

Единственный минус - ими в некоторых ситуациях лучше не злоупотреблять. У оперы, например, может затык случиться на скорости.

Документ старый, но написан фундаментально. -- фундаментально, но наверняка дубово и много авторских соплей. Я не понимаю некоторых любителей цитировать "Запад" и принимать любую точку зрения. Тут всё довольно интереснее, если копнуть глубже и как правило мотивы написания подобных вещей вполне прозаичны.

По поводу оптимизации ... видите сколько лишних телодвижений? Пойди в ацес пропиши то, зайди в код настрой заголовок, проверь чтобы всё было так. Нафига? Сервер умеет гзип отдавать без проблем, есть компиляторы(сборщики), все велосипеды уже придуманы по сути.

alanvanduke · January 6, 2011

Ну вот, уважаемый, Shift-Web, еще не читали а уже критическое отношения. И статья, к сову, написана нашими людьми.

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

И, кстати, gzip не панацея, т.к. gzip - это архив. На сервере архив необходимо запаковать это раз, второе распаковать на машине клиента. Мало того, что это грузит машину клиента, это повышает расходы на память у сервера. Может это звучит немного слишком, но я просто к тому это сказал, что не все велосипеды едут одинаково хорошо.

s0rr0w · January 6, 2011

И, кстати, gzip не панацея, т.к. gzip - это архив. На сервере архив необходимо запаковать это раз, второе распаковать на машине клиента. Мало того, что это грузит машину клиента, это повышает расходы на память у сервера. Может это звучит немного слишком, но я просто к тому это сказал, что не все велосипеды едут одинаково хорошо.

Это крохоборство. Объектное представление ноды в памяти занимает в разы больше, чем текст, на основании которой она создана. Архивировать текст не ресурсоемкая задача. С ней 10 лет назад справлялись без проблем, а сегодня и подавно.

Shift-Web · January 7, 2011

Ну вот, уважаемый, Shift-Web, еще не читали а уже критическое отношения. И статья, к сову, написана нашими людьми.
Я много читаю информации и у меня абсолютно отсутствует какие либо предрассудки по поводу страны, где живет человек, который написал тот или иной полезный текст. Полезен - хорошо. Я ведь не виноват, что множество полезных решений приходит к нам из-за границы, где формирование веба на более высоком уровне, чем у нас.
И, кстати, gzip не панацея, т.к. gzip - это архив. На сервере архив необходимо запаковать это раз, второе распаковать на машине клиента. Мало того, что это грузит машину клиента, это повышает расходы на память у сервера. Может это звучит немного слишком, но я просто к тому это сказал, что не все велосипеды едут одинаково хорошо.

Может немного не корректно выразился, просто есть такая тенденция тянуть с забугра и в последствии это становится панацеей чуть больше, чем есть на самом деле (: Я всего лишь хотел обозначить своё мнение критично "фундаментальностей" и тоже стараюсь избегать предрассудков.

Гзип уже давным давно поддерживается, как отметили выше.

с Уважением.

Sign In

Кто как CSS пишет?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information