Да се научим от mail.bg как се стилизира CSS

R

ReminD

Well-Known Member
Колеги, да се учим на малко CSS :D , изнамерено в <head> таговете и стилизацията на mail.bg


<link media="(max-width: 799px)"

rel="stylesheet"

href="/css/responsive_common.css">



<!-- viewport specific -->

<!-- no menu -->

<!-- 320px to 359px -->

<link media="(max-width: 359px)"

rel="stylesheet"

href="/css/style_w320.css">



<link media="(max-width: 360px)"

rel="stylesheet"

href="/css/style_wlt360.css">



<!-- 360px to 479px -->

<link media="(min-width: 360px)

and (max-width: 479px)"

rel="stylesheet"

href="/css/style_w360.css">



<link media="(max-width: 380px)"

rel="stylesheet"

href="/css/style_wlt380.css">

<link media="(max-width: 410px)"

rel="stylesheet"

href="/css/style_wlt410.css">

<link media="(max-width: 460px)"

rel="stylesheet"

href="/css/style_wlt460.css">



<!-- 480px to 799px -->

<link media="(min-width: 480px)

and (max-width: 799px)"

rel="stylesheet"

href="/css/style_w480.css">



<link media="(max-width: 525px)"

rel="stylesheet"

href="/css/style_wlt525.css">

<link media="(max-width: 580px)"

rel="stylesheet"

href="/css/style_wlt580.css">

<link media="(max-width: 625px)"

rel="stylesheet"

href="/css/style_wlt625.css">

<link media="(max-width: 640px)"

rel="stylesheet"

href="/css/style_wlt640.css">

<link media="(min-width: 640px)

and (max-width: 799px)"

rel="stylesheet"

href="/css/style_w640.css">



<!-- 640px to 799 px -->



<link media="(max-width: 680px)"

rel="stylesheet"

href="/css/style_wlt680.css">

<link media="(min-width: 700px)

and (max-width: 799px)"

rel="stylesheet"

href="/css/style_w700.css">



<!-- with menu -->

<link media="(min-width: 800px)

and (max-width: 815px)"

rel="stylesheet"

href="/css/style_wlt815.css">

<link media="(min-width: 800px)

and (max-width: 860px)"

rel="stylesheet"

href="/css/style_wlt860.css">



<!-- 800px to 979px -->

<link media="(min-width: 800px)

and (max-width: 979px)"

rel="stylesheet"

href="/css/style_w800.css">



<link media="(min-width: 800px)

and (max-width: 930px)"

rel="stylesheet"

href="/css/style_wlt930.css">

<link media="(min-width: 800px)

and (max-width: 980px)"

rel="stylesheet"

href="/css/style_wlt980.css">

<link media="(min-width: 980px)

and (max-width: 1279px)"

rel="stylesheet"

href="/css/style_w980.css">

<link media="(min-width: 800px)

and (max-width: 1000px)"

rel="stylesheet"

href="/css/style_wlt1000.css">

<link media="(min-width: 800px)

and (max-width: 1024px)"

rel="stylesheet"

href="/css/style_wlt1024.css">

<link media="(min-width: 1280px)"

rel="stylesheet"

href="/css/style_w1280.css">


<!-- eja -->

<link media="(min-width: 980px)"

rel="stylesheet"

href="/css/style_edge.css">
Увеличете...
 
Имат доста CSS да. Но това на мен ми изглежда доста професионално. Ако натъпчеш всичко в един файл е много тегаво за разработчика. В техния случай са отделили време/пари за културно разделение. И да според мен наистина има какво да се научи.
 
@hristonev причината е съвсем друга. Така са проектирали нещата при тях. Разработчика го боли фара дали нещата са в един или много файлове.

@ReminD не разбирам какво значение има броя файлове. Фиксват хората, така че явно работят, а не се скатават.
 
hristonev каза:
Ако натъпчеш всичко в един файл е много тегаво за разработчика. В техния случай са отделили време/пари за културно разделение. И да според мен наистина има какво да се научи.
Увеличете...
LESS, SASS, Grunt, etc ... ко не?
 
AMitrev каза:
Така са проектирали нещата при тях.
Увеличете...
Аз само казах, че ми харесва как са проектирали. Проекта идва от разработчика надали мениджър продажби го боли к'во е CSS ;)
Torbalan Trolski каза:
LESS, SASS, Grunt
Увеличете...
По начало избягвам да работя с регулярни. Бавни са, има вероятнст от счупване при лош сорс.

Не давам наклон на друг как да си пише кода. Изразявам си моето мнение. И да като отворя един CSS с 5-10к реда определено не цъфтя от радост.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Горе