Ксдыщь!

Дилетантские заметки про XSLT/XPath, HTML/CSS и всякую фигню

6 субъективных критериев эстетики кода

28 марта 2007 · Комментариев: 21 · Свалка

Любят буржуи-блоггеры составлять всяческие списки. 10-каких-то-там-охуенных-фиговин или типа того.

Вот и я для разнообразия решил попробовать. Работы мозга — ноль, а людям нравится. Хеппи-енд, все дела. На 10 меня, правда, не хватило. Весна, знаете ли, не распологает. Я лучше вибрейки поднастрою, чем еще четыре пункта буду вымучивать.

Флудить будем про эстетику кода. Кто сказал, что мы не романтеги?

Семантика

Некрасиво:
span.motto {
    display:block;
    }
Красиво:
div.motto {}

Здравый смысл

Некрасиво:
div.motto {
    width:100%;
    }
Красиво:
div.motto {}

Оформление вложенности

Некрасиво:
.block {
    padding:10px;
    }
.block em {
    color:#F00;
    }
Красиво:
.block {
    padding:10px;
    }
    .block em {
        color:#F00;
        }

Сокращенная запись

Некрасиво:
.block {
    padding-left:5px;
    padding-top:10px;
    padding-bottom:2em;
    padding-right:5px;
    }
Красиво:
.block {
    padding:10px 5px 2em;
    }

Значения по умолчанию

Некрасиво:
.block {
    background:#000 url(/img/button.gif) repeat 0 0;
    }
Красиво:
.block {
    background:#000 url(/img/button.gif);
    }

Переопределения

Некрасиво:
.block {
    background:#000 url(/img/button.gif) repeat-x;
    }
.block-red {
    background:#F00 url(/img/button.gif) repeat-x;
    }
Красиво:
.block {
    background:#000 url(/img/button.gif) repeat-x;
    }
    .block.red {
        background-color:#F00;
        }

Похоливорим в комментах?

Теги: ·

Комментариев: 21 ↓

  • Gansik // 28 марта 2007 в 19:34

    > Похоливорим в комментах?
    Отступы для селекторов некрасиво. Потому что когда селекторов пару штук, вопросов нету, но если больше десяти вложенных “переопределений” то надо уже решать искусственно какие из селекторов переопределения а какие начало нового куска определений. Так что уж лучше коментами блоки отмечать:
    /*~text block */
    .block{
    background:#000 url(/img/button.gif) repeat-x;
    }
    .block.red{
    background-color:#F00;
    }

  • Flack // 28 марта 2007 в 19:35

    Комменты не отменяют лесенки.

  • pepelsbey // 28 марта 2007 в 19:36

    Единомышленники — это всегда приятно. Согласен на все 100%. Ну… разве что width:100% может работать как clearing для IE, но всё-равно будет некрасиво, это да :) Дай бог, чтобы хватило этих несчастных 20-ти минут на РИТе, чтобы рассказать о похожих вещах…

  • Gansik // 28 марта 2007 в 19:36

    а, блин, все табы удалило из комментария…
    /*______________________________________________________ ~text block */
    .block{
    __________background:#000 url(/img/button.gif) repeat-x;
    }
    .block.red{
    __________background-color:#F00;
    }

  • pepelsbey // 28 марта 2007 в 19:39

    Ага. Ещё: путём сложных опытов было научно доказано, что лесенка глубиной более, чем три вложенности свидетельствует об избыточности. Значит что-то можно вынести в отдельный структурный блок правил.

  • Gansik // 28 марта 2007 в 19:51

    > Комменты не отменяют лесенки.
    угу, они её заменяют ;)

    > Ага. Ещё: путём сложных опытов было научно доказано, что лесенка глубиной
    > более, чем три вложенности свидетельствует об избыточности. Значит что-то
    > можно вынести в отдельный структурный блок правил.
    Угу, ну а если я скажу что на самом деле мой опыт говорит мне что приемлемо 5 вложеностей? Доказать это утверждение я не могу, равно как и вы своё.
    Вот в вашей фразе и кроется главная проблема, у каждого свой опыт и свои представления о том сколько же вложенностей нормально будет, вот и начнут писать такие лесенки которые без горизонтального скрола фиг просмотришь. Я не сомневаюсь что у вас обоих будет все красиво и логично, но, ИМХО, лучше вы сами так делайте а другим не советуйте. Пусть хотя бы определения одного блока рядом пишут и за то спасибо, а то видел раз CSS отсортированный по алфавиту ;)

  • Vitaly Harisov // 28 марта 2007 в 23:16

    Начнёшь работать — посмотришь на CSS код одного проекта. Потом пообщаемся. ;)

  • MT // 29 марта 2007 в 01:15

    Семантика
    H1 SPAN {display: block; }

    Здравый смысл
    div.motto {width:100%; }
    В действительности, очень хороший способ включить hasLayout для IE не только версий 6 и ниже, позволяющий, по сравнению с {height: 1px}, избежать дополнительного {min-height: 0} или {zoom: 1} для IE7.

    Оформление вложенности
    Правильная и полноценная вложенность контекстных селекторов сама себя оформляет:
    UL {…}
    UL LI {…}
    UL LI A {…}
    Дополнительные отступы лишние. Хотя, вполне вероятно, и могут казаться удобными — при условии записи правил в столбик.

    Сокращенная запись
    Главное — в погоне за компактностью не приходить к дублированию информации, например:

    #myElement {padding: 0.2em 0 0.2em 10px; }

    Значения по умолчанию
    Ну в этом вряд ли кто-то сомневается. ;-)

    Переопределения
    Здесь промолчу, потому как приходилось сталкиваться со своеобразным механизмом каскадирования таких вещей в IE в определённых ситуациях и подобными конструкциями практически не пользуюсь.

  • Neutrino // 29 марта 2007 в 17:23

    Не прибавить не отнять. Единственное что, стараюсь не смешивать единицы без нужды:

    .block {

    padding-left:5px;
    padding-top:10px;
    >> padding-bottom:2em;
    padding-right:5px;
    }

  • Sam // 30 марта 2007 в 15:35

    В принципе почти всё верно.
    Почти – это про лесенки.

    В этом вопросе согласен с MT.

  • akella // 1 апреля 2007 в 23:11

    Я бы еще добавил,
    Структурно
    @import url(“layout.css”);
    @import url(“fonts.css”);
    …
    И иногда даже так
    @import url(“content.css”);
    @import url(“sidebar.css”);

  • Chupa // 3 апреля 2007 в 02:08

    Я еще стараюсь, во всех правилах придерживаться единственной последовательности написания:
    .foo { position; float; width; height; margins; paddings; background; font properties; }

  • Chupa // 3 апреля 2007 в 02:16

    И еще стараюсь не называть стили цветами типа .red или .mocco, а описывать их назначение вроде .important, .warn

  • Влад // 3 апреля 2007 в 23:16

    Ты чо дебил закрывающую скобку правее чем надо ставить?

  • Flack // 4 апреля 2007 в 00:22

    Ишь понавыползали весной…

  • Shimon // 5 апреля 2007 в 11:24

    согласен со всем, написанным в посте, добавлю лишь, что в последние полгода пристратился к лесенке в 3-5 уровней, разделяя логические блоки несколькими типами комментариев (с разным оформлением), а также научился писать все аргументы по алфавиту (за неправильное использование терминов – не бейте, не знаю я их), получается чтото наподобие:
    background: … ;
    border: … ;
    color: … ;
    font: … ;
    и тд.

  • lusever // 8 апреля 2007 в 03:23

    Shimon – сортировка в textmate по F5.
    Все-таки
    span.motto {
    ___display:block;

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

  • jahson // 10 апреля 2007 в 02:54

    Отступы – вещь спорная.
    В вёрстке вложенность бывает большой, это вам не программирование.
    Поэтому тут надо соблюдать некоторую осторожность.

  • ПИФ // 12 апреля 2007 в 22:53

    разделяю логические блоки несколькими типами комментариев (с разным оформлением), а также учусь писать все аргументы по алфавиту

  • Shimon // 17 апреля 2007 в 04:54

    lusever – на работе у меня PC для которого textmate не существует, дома Мак ожидается в самом ближайшем будущем (знал бы что Leopard не выйдет весной – уже был бы).

    BTW, нашел какой то аналог textmate для Win – E text editor beta – посмотрим…

  • Говорящий баннер // 18 сентября 2007 в 20:45

    Кому как… кому важна красота семантическая, кому нет. Спор переносить ли фигурную скобку на новую строку, не переносить. По алфавиту ли или по идеологическим признакам сортировать. Кому как удобно, красота тут ни при чем

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