Stack Overflow
Stack Overflow

Questions tagged [smacss]

SMACSS (pronounced “smacks”) is more style guide than rigid framework.

29 questions
15
votes
4 answers

SMACSS and BEM: How to position Module inside of a Module?

Note: I use the word Module which in BEM is called a Block. Also using modified BEM naming convention BLOCK__ELEMENT--MODIFIER, please use that in your answer as well. Suppose I have a .btn module that looks something like this: .btn { …
Gil Birman
  • 35,242
  • 14
  • 75
  • 119
11
votes
2 answers

Are SMACSS, BEM and OOCSS not as portable?

SO I have a problem with OOCSS. It is supposed to be more portable but compared to how I usually do things, I'm finding it less so. My example: I have a widget testimonial. In the main content body (which has a white background) the testimonial has…
gjok
  • 195
  • 1
  • 12
7
votes
2 answers

What is the point of BEM's explicit descendant class naming in the presence of SCSS?

I'm trying to pickup and understand the reasoning behind CSS naming conventions such as BEM or SUITCss. I'm having a hard time understanding the value of descendent class names in the presence of SCSS. For example:
4
votes
1 answer

How to choose among CSS modular methods like BEM, OOCSS, AMCSS, SMACSS, SUITCSS and others?

The is a lot of modular solutions for CSS. I listed some in the subject but probably there have been more already. How do you choose which one to use for your new project? Is there any comparison?
Varvara Stepanova
  • 3,489
  • 4
  • 22
  • 26
4
votes
2 answers

SMACSS: Is it correct to use a grid inside a module?

I'm using SMACSS (Scalable and Module Architecture for CSS): http://smacss.com/ Specifically, I'm using Yahoo's Pure CSS (SMACSS) framework (just the Grids stylesheet): http://purecss.io/grids/ Is it correct to place a grid inside of a module? For…
edt
  • 22,010
  • 30
  • 83
  • 118
3
votes
2 answers

What is the difference between a utility and a component in Nicolas Gallaghers' frontend methodology?

In Nicolas Gallaghers' write up about HTML semantics, he outlines a method of structuring html and css in a modular way (influenced by the BEM architecture). He gives an example, which I don’t completely understand: /* Utility */ .u-utilityName…
user1694077
3
votes
1 answer

SASS + SMACSS properly encapsulating modules

Here is my setup: File Relationships home.php <---styles---- _layout.scss | imports | v animation.html <---styles---- _animation.scss home.php - the file used to outline the "layout" HTML for the homepage:
Kevin
  • 1,195
  • 12
  • 14
2
votes
3 answers

Nested elements naming style (Jade, HAML, Slim)

Looking for solution how to use SMACSS naming convention with jade, haml or slim template engine. Expect following jade code : .module .child .child as output i'll get following:
Evgeniy
  • 2,915
  • 3
  • 21
  • 35
1
vote
3 answers

How to reference multiple sub-classes on the same element with SASS

I'm using the SMACSS method of writing my SCSS code, and I have a subclass that I want to reference if it also has another subclass. HTML
SCSS .parent-class { …
Alonzo
  • 85
  • 1
  • 10
1
vote
2 answers

Where to put grid layout in SUSY/SMACSS structure

say on the about page you have 3 column grid and on the home page you have a four column grid, in which file within the css architecture should these styles be placed to layout these pages, should each page have a layout css?
user1937021
  • 10,151
  • 22
  • 81
  • 143
1
vote
2 answers

How to name nested elements using BEM and SMACCS

I just started out using BEM and SMACCS for my stylesheets but have run into some trouble as far as naming deeply nested elements in the DOM. Say for instance I have a div called .main-container. Nested inside the first level of the main-container…
Carl Edwards
  • 13,826
  • 11
  • 57
  • 119
1
vote
2 answers

using smacss is it recommended that modules never set margins but let this be handled by layout/containers?

I'm rereading smacss (Scalable and Modular Architecture for CSS)[https://smacss.com/] and most of the stuff makes sense to me. One of the primary things is that a Module doesn't need to know anything of it's context/ surroundings. I.e.: it just…
Geert-Jan
  • 18,623
  • 16
  • 75
  • 137
1
vote
2 answers

How to handle css modules changes in responsive design using ooccss and smacss

I am studying CSS best practices and methodologies like OOCSS and SMACSS to use in a medium scope project that uses Twitter Boostrap 3 and LESS. I'm starting to get a grasp of these methods but I have some trouble to find out how to handle…
Benjamin
  • 21
  • 1
1
vote
1 answer

SMACSS: Why not use element selectors in Layout definition at a HTML5 page

I'm learning smacss.com. Jonathan Snook states in his book (P. 14) It's not necessary to use element selectors with a Layout style. I can't find his statement online: http://smacss.com/book/type-layout Today in HTML5 I use
whitefleaCH
  • 67
  • 1
  • 9
1
vote
2 answers

Module vs. Module Instance in BEM, SMACSS and OOCSS

Most CSS methodologies have the concept of reusable modules - BEM calls them blocks whereas SMACSS and OOCSS calls them modules. All of them recommend creating the modules with a class, e.g. .room {} Now if I have two or more instances of rooms in…
Naresh
  • 23,937
  • 33
  • 132
  • 204
1
2