Side Effects in CSS

Limbaje de Programare HTML & CSS
, ,
1

http://philipwalton.com/articles/side-effects-in-css/

2

Naming collision aka “when the shit hits the fan”. Si de obicei se termina cu workaround

Exista o varianta interesanta pentru aplicatii reactjs (la aplicatii ai mai multe sanse sa apara problema): http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html (inca nu o agreez, dar nu exclud pentru viitor

1 Like
3

Recent experimentez cu ceva de genul:

Model:

var article = {
  title: '...'
, content: '...'
, author: '...'
, date: '...'
}

CSS:

/* data related classes */
.article {}
.article_title {}
.article_content {}
.article_author {}
.article_date {}

/* visual related classes */
.article-footer {}
.article-fancy-stuff {}

/* component classes */
.btn-like {}
.btn-share {}

HTML:

<b class="article">
  <b class="article_content">...</b>
  <b class="article-footer">
    <button class="btn-like js-article-like">...<button>
    <button class="btn-like js-article-share">...<button>
  </b>
</b>

Am facut un app destul de complex pe structura asta, daca ai o idee mai clara cum sa-ti imparti componentele si din ce sunt compuse mai exact, cam greu intalnesti side effects.

In cazul in care vrei sa prezinti articolul intr-un alt view, modificarile de stil se intampla numai in cadrul acelui container:

.pane-article-preview {}
.pane-article-preview .article_title {}
.pane-article-preview .article_author {}
.pane-article-preview .article_date {}

In JS este article.title, in CSS devine article_title, sa se faca o distinctie mai clara a elementelor care sunt pur vizuale (.name-with-dash) si care sunt puse sa reprezinte informatiile din model.

2 Likes
4

Adică ai folosit BEM? :smiley:

Și eu am început cam de aproximativ un an să folosesc o sintaxă de genul ăsta. Cea mai mare provocare la site-uri este să găsești denumiri generice pentru elemente asemănătoare dar care nu au neapărat o legătură sau la elemente ce vor fi folosite în JS.

Dar cum unul dintre cele mai dificile lucruri din programare este să găsești nume potrivite…

1 Like