Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [CSS] Best practices / 15 сообщений из 15, страница 1 из 1
30.10.2012, 08:07:01
    #38017979
scymaks
scymaks
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Best practices
Добрый день.

Начал получать более крупные задачи чем изменить ширину там-то, добавить что-нибудь туда-то (в целом, работа заключалась в правке существующих стилей).

И вот начал верстать и пошел по такому пути:

Код: sql
1.
style.css



Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
div.page { /* */ }

/* Page header :: Begin */

div.page .header { /* */ }
div.page .header .top { /* */ }
div.page .header .middle { /* */ }
div.page .header .bottom { /* */ }

/* Page header :: End */

/* Page content :: Begin */

div.page .content { /* */ }
div.page .content .left-side-content { /* */ }
div.page .content .right-side-content { /* */ }

/* Page content :: End */

/* Page footer :: Begin */

div.page .footer { /* */ }
div.page .footer .top { /* */ }
div.page .footer .middle { /* */ }
div.page .footer .bottom { /* */ }

/* Page footer :: End */




Код: sql
1.
index.html



Код: xml
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
...
<body>
    <div class="page">
        <!-- Page header -->
        <div class="header">
            <div class="top"> ... </div>
            <div class="middle"> ... </div>
            <div class="bottom"> ... </div>
        </div>

        <!-- Page content -->
        <div class="content"> 
            <div class="left-side-content"> ... </div>
            <div class="right-side-content"> ... </div>
        </div>
        
        <!-- Page footer -->
        <div class="footer">
            <div class="top"> ... </div>
            <div class="middle"> ... </div>
            <div class="bottom"> ... </div>
        </div>        
    </div>
</body>
...



Но выглядит это мягко говоря говнокодисто... Как в мире CSS делают подобные задачи?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2012, 08:14:58
    #38017984
scymaks
scymaks
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Best practices
Я читал статьи разные, и подозреваю что внутри index.html это должно выглядеть примерно вот так:

Код: xml
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
...
<body>
    <div id="page">
        <!-- Page header -->
        <div id="header">
            <div class="top"> ... </div>
            <div class="middle"> ... </div>
            <div class="bottom"> ... </div>
        </div>

        <!-- Page content -->
        <div id="content"> 
            <div class="left-side-content"> ... </div>
            <div class="right-side-content"> ... </div>
        </div>
        
        <!-- Page footer -->
        <div id="footer">
            <div class="top"> ... </div>
            <div class="middle"> ... </div>
            <div class="bottom"> ... </div>
        </div>        
    </div>
</body>
...



или что-то даже типа того:

Код: xml
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
...
<body>
    <div id="page">
        <!-- Page header -->
        <div id="header">
            <div id="header-top"> ... </div>
            <div id="header-middle"> ... </div>
            <div id="header-bottom"> ... </div>
        </div>

        <!-- Page content -->
        <div id="content"> 
            <div id="content-left-side"> ... </div>
            <div id="content-right-side"> ... </div>
        </div>
        
        <!-- Page footer -->
        <div id="footer">
            <div id="footer-top"> ... </div>
            <div id="footer-middle"> ... </div>
            <div id="footer-bottom"> ... </div>
        </div>        
    </div>
</body>
...



А там, где, например, меню, то делаем вот так:

Код: xml
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
...
<body>
    <div id="page">
        <!-- Page header -->
        <div id="header">
            <div id="header-top"> ... </div>
            <div id="header-middle"> ... </div>
            <div id="header-bottom"> ... </div>
        </div>

        <!-- Page content -->
        <div id="content"> 
            <div id="content-left-side">
                <div class="menu">
                    <div class="title"> Menu title </div>
                    <div class="items">
                       <div class="item"> Первый пункт меню </div>
                       <div class="item"> Второй пункт меню </div>
                       <div class="item"> Третий пункт меню </div>
                    </div>
                </div>
            </div>
            <div id="content-right-side"> ... </div>
        </div>
        
        <!-- Page footer -->
        <div id="footer">
            <div id="footer-top"> ... </div>
            <div id="footer-middle"> ... </div>
            <div id="footer-bottom"> ... </div>
        </div>        
    </div>
</body>
...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2012, 08:23:23
    #38017994
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Best practices
Не совсем понятна твоя проблема... Что именно хочешь?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2012, 08:30:31
    #38018002
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Best practices
scymaksА там, где, например, меню, то делаем вот так:

Код: xml
1.
2.
3.
4.
5.
6.
7.
8.
                <div class="menu">
                    <div class="title"> Menu title </div>
                    <div class="items">
                       <div class="item"> Первый пункт меню </div>
                       <div class="item"> Второй пункт меню </div>
                       <div class="item"> Третий пункт меню </div>
                    </div>
                </div>


Я бы сделал так...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
                <div class="menu">
                    <hN> Menu title </hN>
                    <ul>
                       <li> Первый пункт меню </li>
                       <li> Второй пункт меню </li>
                       <li> Третий пункт меню </li>
                    </ul>
                </div>


Где hN какой-то уровень заголовка...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2012, 08:34:35
    #38018004
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Best practices
scymaksпошел по такому пути:

Код: sql
1.
style.css



Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
div.page { /* */ }

/* Page header :: Begin */

div.page .header { /* */ }
div.page .header .top { /* */ }
div.page .header .middle { /* */ }
div.page .header .bottom { /* */ }

/* Page header :: End */

/* Page content :: Begin */

div.page .content { /* */ }
div.page .content .left-side-content { /* */ }
div.page .content .right-side-content { /* */ }

/* Page content :: End */

/* Page footer :: Begin */

div.page .footer { /* */ }
div.page .footer .top { /* */ }
div.page .footer .middle { /* */ }
div.page .footer .bottom { /* */ }

/* Page footer :: End */


Никогда не понимал, зачем эти повторения? Я про div.page и же с ними...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2012, 08:46:57
    #38018011
scymaks
scymaks
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Best practices
krvsa,

Ну хочу чтобы стили были распространены в своей области видимости и не более...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2012, 08:47:34
    #38018012
scymaks
scymaks
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Best practices
krvsa,

насчет ul списка... Не знаю... Читал, что есть какие-то минусы такого подхода
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2012, 11:10:18
    #38018265
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Best practices
Автор, Вы ищете это:
http://ru.bem.info/
?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2012, 11:49:21
    #38018338
bazile
bazile
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Best practices
scymaksНу хочу чтобы стили были распространены в своей области видимости и не более...
Желание понятное, но неправильное с точки зрения производительности CSS. Почитай для затравки пару статей - Optimize browser rendering , Writing efficient CSS .

scymaksнасчет ul списка... Не знаю... Читал, что есть какие-то минусы такого подхода
krvsa прав. UL здесь лучше подходит т.к. меню является списком.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2012, 13:08:30
    #38018503
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Best practices
bazileПочитай для затравки пару статей - Optimize browser rendering , Writing efficient CSS .Первую можно не читать, во второй все то же и подробнее.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2012, 20:31:43
    #38019338
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Best practices
scymaksЧитал, что есть какие-то минусы такого подхода
А я читал про семантическую верстку... И минусов у списков при применении к меню пока не встречал.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.10.2012, 17:40:50
    #38020572
scymaks
scymaks
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Best practices
krvsa,

ну я же начинающий еще. Я делаю пока что так, как умею. Вот наберусь опыта, и буду делать лучше.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.10.2012, 17:41:07
    #38020573
scymaks
scymaks
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Best practices
Паганель,

да, спасибо , почитаю )
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.10.2012, 17:41:33
    #38020575
scymaks
scymaks
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Best practices
bazile,

Спасибо за ссылки, прочту обязательно!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.11.2012, 08:55:24
    #38021060
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Best practices
scymaksну я же начинающий еще. Я делаю пока что так, как умею. Вот наберусь опыта, и буду делать лучше.
Главное что уже примеры тестовые делаешь. А то многие даже на это сподобиться не в состоянии...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [CSS] Best practices / 15 сообщений из 15, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 468ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1449171]:
 0ms
get settings:
 6ms
get forum list:
 10ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 175ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 52ms
get tp. blocked users:
 1ms
others: 207ms
total:  468ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]